Question

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

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

单击缩略图时，上面的主图像将通过JavaScript替换背景图像网址进行更改。

$('.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';

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

Answer 1

我相信你对此感兴趣的是css过渡而不是css动画。网上有大量资源，但这里有一个例子：

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

添加动画以更改背景图片幻灯片

1 个答案: