为更改背景图像幻灯片添加动画答案

【问题标题】：Add animation to changing background image slideshow为更改背景图像幻灯片添加动画
【发布时间】：2018-05-16 14:23:13
【问题描述】：

我使用以下示例代码创建了带有缩略图的背景幻灯片：

<div class="my-background-cover uk-animation-fade and uk-animation-kenburns" style="background-image: url({$product.cover.bySize.ats_large.url});">

当您单击缩略图时，上面的主图像会通过 JavaScript 替换背景图像 url 进行更改。

$('.js-thumb').on('click', (event) => {
      var quickviewDataBgPath  = $(event.target).data('image-large-src');
      $('.js-qv-product-cover').css('background-image', 'url(' + quickviewDataBgPath + ')' );       
    });

但是，我尝试淡入和淡出，以及在背景图像发生变化时应用我想要的任何动画。例如，下面的 css 样式使用 uk-animation-fade 和 uk-animation-kenburns 类应用于 div。

    'animation-name': 'uk-scale-kenburns';
    'animation-duration': '15s';
    'animation-direction': 'reverse';
    'animation-timing-function': 'ease-in'; 
    'animation-fill-mode': 'both';

但是，动画仅在页面加载并出现第一张图片时起作用。单击缩略图并更改图像时，动画不适用。单击缩略图时，让每个背景图像淡入和淡出的正确方法是什么。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我相信您在这里感兴趣的是 css 过渡而不是 css 动画。网上有很多资源，但这里有一个例子：

https://css-tricks.com/controlling-css-animations-transitions-javascript/

【讨论】：