我使用以下示例代码创建了带缩略图的背景幻灯片:
<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 + ')' );
});
但是，我尝试淡入和淡出，以及在背景图像发生变化时将我想要的任何动画应用到背景图像上。例如，使用 uk-animation-fade 和 uk-animation-kenburns 类将下面的 css 样式应用于 div。
'animation-name': 'uk-scale-kenburns';
'animation-duration': '15s';
'animation-direction': 'reverse';
'animation-timing-function': 'ease-in';
'animation-fill-mode': 'both';
但是，动画仅在页面加载且第一张图片出现时才起作用。单击缩略图且图像发生变化时，动画不适用。 单击缩略图时让每个背景图像淡入和淡出的正确方法是什么。
最佳答案
我相信您在这里感兴趣的是 css 转换而不是 css 动画。网上有很多资源，但这里有一个例子:
https://css-tricks.com/controlling-css-animations-transitions-javascript/
关于javascript - 添加动画以更改背景图像幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50373490/