本文旨在解决图片轮播过程中，如何通过 CSS 类控制淡入动画，并在动画结束后移除该类，以避免动画重复触发的问题。通过监听 animationend 事件，并在事件触发时移除或替换 CSS 类，可以实现更精细的动画控制。同时，利用 Promise 预加载图片，可以避免图片加载延迟导致的动画效果不佳。
实现图片轮播的淡入淡出效果
在实现图片轮播时，为了提升用户体验，常常会添加淡入淡出动画。一种常见的做法是通过 JavaScript 添加和移除 CSS 类来实现。然而，简单地在 setTimeout 中移除类可能导致动画未完成就被移除，或者动画重复触发。
使用 animationend 事件
animationend 事件在 CSS 动画完成后触发。我们可以监听这个事件，并在事件处理函数中移除或替换相应的 CSS 类。
以下是一个示例：
const changingImage = document.querySelector('#changing-image');
changingImage.onanimationend = () => {
changingImage.classList.replace('fade-in', 'opa1');
};在这个例子中，当 fade-in 动画结束后，fade-in 类会被 opa1 类替换。这里的 opa1 类可以简单地设置 opacity: 1;，确保图片完全显示。
解决图片加载延迟问题
在图片轮播中，另一个常见的问题是图片加载延迟。如果图片尚未加载完成就开始播放动画，可能会导致动画效果不佳。为了解决这个问题，可以使用 Promise 来预加载图片。
以下是一个预加载图片的函数：
const loadImage = ref => new Promise(resolve => {
ref.img = new Image();
ref.img.onload = () => { ref.status = 'OK'; resolve(); };
ref.img.onerror = () => { ref.status = 'bad'; resolve(); };
ref.img.src = ref.path;
});这个函数接受一个包含图片路径的对象 ref，创建一个新的 Image 对象，并监听 onload 和 onerror 事件。当图片加载完成或加载失败时，Promise 会 resolve。
完整的图片轮播示例
结合 animationend 事件和 Promise 预加载，可以实现一个更完善的图片轮播。
首先，定义图片数组：
const imageArray = [
{ path: 'https://picsum.photos/id/237/200/300', status: 'none', img: null },
{ path: 'https://picsum.photos/id/238/200/300', status: 'none', img: null },
{ path: 'https://picsum.photos/id/239/200/300', status: 'none', img: null },
{ path: 'https://picsum.photos/id/240/200/300', status: 'none', img: null }
];然后，使用 Promise.all 预加载所有图片：
Promise.all(imageArray.map(el => loadImage(el)))
.then(() => {
// 移除加载失败的图片
for (let i = imageArray.length; i--;) {
if (imageArray[i].status === 'bad') {
imageArray.splice(i, 1);
}
}
if (imageArray.length === 0) {
console.log('problemo! no image are loaded!');
return;
}
let currentImg = 0;
setImage(currentImg);
setInterval(() => {
currentImg = ++currentImg % imageArray.length;
setImage(currentImg);
}, 5000);
});最后，定义 setImage 函数来更新图片并添加动画：
function setImage(indx) {
changingImage.className = 'opa0';
changingImage.src = imageArray[indx].path;
changingImage.classList.replace('opa0', 'fade-in');
}在这个函数中，首先将图片的透明度设置为 0 (opa0 类)，然后更新 src 属性，最后添加 fade-in 类来触发淡入动画。
CSS 样式
以下是相关的 CSS 样式：
.opa0 { opacity: 0; }
.opa1 { opacity: 1; }
.fade-in {
animation: fadeIn 3s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#changing-image {
display: block;
width: 200px;
height: 300px;
padding: 5px;
border: 1px solid lightseagreen;
margin: 1em;
}HTML 结构
HTML 结构非常简单：
@@##@@
总结
通过监听 animationend 事件和使用 Promise 预加载图片，可以实现更流畅、更可控的图片轮播动画。这种方法不仅可以避免动画重复触发，还可以解决图片加载延迟导致的问题，从而提升用户体验。
