认识transitionend事件
开源
个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；
transitionend含义
transitionend事件是在CSS transition结束后触发，常用于监听transition 事件；例如，一个正方形向右位移300px到达终点，再快速向右位移200px；可利用transitionend监听事件完成下面效果。
JS代码如下:
// 点击事件让盒子进行第一步位移
let div = document.querySelector('div');
div.addEventListener('click', function () {
div.className = 'change';
});
// 第二步盒子到终点取消transition位移200px并变色
div.addEventListener('transitionend', function () {
div.style.transition = 'none';
div.style.transform = 'translateX(500px)';
div.style.backgroundColor = 'purple';
})
图片效果:
transitionend业务中的使用
transitionend监听事件，现今网页中必备轮播图效果就可以利用transitionend监听事件达到无缝轮播的完美效果，下面是在下模仿网易游戏主页做的一段轮播图效果；
图片效果:
1、轮播图的基本实现效果是点击左右按钮，可以让轮播图左右位移图片，并且在图片位移时增加过渡效果，上面图片效果因为是用帧图片合成的GIF图，故而过渡效果看不出来，可惜掘金无法上传视频，实在是非常难受。
2、我们用数字来举例轮播图的排布方式，比如有四张图片要完成轮播需求，我们可以用1234表示这四张图片，但是因为到最后一张和第一张图时，再点击下一张回到第一张时，会先出现空白才到第一张；相信做过轮播图的小伙伴们都知道轮播图本质是类似于动画，想要实现无缝链接的效果最前面和最后面都要加补一张图片，那加补后新的布局图片就是312341；
图片效果:
3、当我们处于第4张时，点击右按钮时，会有过渡状态达到最后一张图片，当最后一张图片效果完成时，设置的transitionend监听事件函数便生效；首先取消了轮播图的过渡状态，再位移到初始的1图上，当再点击右按钮时，再次添加过渡状态，如此便达到了无缝轮播的效果，左按钮同理；
JS代码:
// 点击右边按钮
btnRight.addEventListener('click', function () {
// 设置节流阀
if (falg) {
falg = false;
loopNum++;
loopPic.style.transition = '.6s ease-out';
loopPic.style.left = -loopNum * loopWidth + 'px';
setTimeout(pauseTime, 600);
}
})
// 点击左边按钮
btnLeft.addEventListener('click', function () {
if (falg) {
falg = false;
loopNum--;
loopPic.style.transition = '.6s ease-out';
loopPic.style.left = -loopNum * loopWidth + 'px';
setTimeout(pauseTime, 600);
}
})
// 判定到达 0 或者最后一个快速返回
loopPic.addEventListener('transitionend', function () {
if (loopNum === 0) {
loopPic.style.transition = 'none';
loopPic.style.left = -(loopPic.children.length / 5 - 2) * loopWidth + 'px';
loopNum = 3;
} else if (loopNum >= loopPic.children.length / 5 - 1) {
loopPic.style.transition = 'none';
loopPic.style.left = -810 + 'px';
// 告诉其他操作处快速返回后的地方；
loopNum = 1;
}
})
结语
transitionend事件经常与transition标签进行搭配使用，在轮播图中运用较为广泛，他两交叉在一起使用还有非常多的使用场景，我平时也经常在测试，希望更多的人分享自己对这两事件和标签的花式运用分享，谢谢观看。
