本文旨在解决图片轮播过程中，如何通过 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 预加载图片，可以实现更流畅、更可控的图片轮播动画。这种方法不仅可以避免动画重复触发，还可以解决图片加载延迟导致的问题，从而提升用户体验。
以上就是图片轮播动画优化：使用 animationend 事件与 Promise 预加载的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575051.html
微信扫一扫 
支付宝扫一扫 
