开发者学堂课程【移动 Web 前端开发：js 功能-过渡结束事件 & amp;动画结束事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8417
js 功能-过渡结束事件&动画结束事件
内容介绍
一、课前回顾
二、代码
一、课前回顾
完成轮播图效果，完成轮播图效果之前，了解了在移动端特有的事件touch，包含了三个 start、move、end 其中最后一个 cancel 只需了解即可，建议使用 addachevent 来进行绑定，绑定当中的事件对象和以往的事件有什么不同？
了解了触摸点集合，每个触摸点又包含哪些信息呢？client、page、screen 三个坐标进行了解。当了解了 touch 之后，轮播图的实现，总结了5点功能以及对应的方式，提前获取需要的元素，通过定时器，过度，位移实现了无缝滚动，无缝滑动。
发现了一个问题，在滚动的时候，图片的最后一张并未与第一张衔接上，如何使之衔接上是一个很重要的问题。
从一张图切换到下一张图的过程需要0.2秒，过渡需要0.2秒，从第一张图片左上角到第二张图片左上角这段位移需要0.2秒的时间，花0.2秒来实现这个动画。
从第八张到移动到第九张，索引为一，因为第九张和索引为1那张是一样的，是索引变成9的时候还需要花0.2秒时间才能把图片显示出来，等9这张图片完全显示出来，然后再瞬间定位到第一张图片，等第九张图片显示出来也可称为动画结束之后，如果当前索引是9瞬间定位到第一张。
二、代码
怎么监听过渡结束这个时间点 过度结束事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>过渡和动画 结束事件</title>
<style>
body{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
/*transition: all 2s;*/
background: red;
animation: big 4s;
}
@keyframes big{
from{}
to{
width: 200px;
height: 200px;
}
}
</style>
</head>
<body>
<div></div>
<script>
/*监听 transitionend 过渡结束事件*/ document.querySelector('div').addEventListener('transitionend',function(){
console.log('transitionend');
});
/*监听 animationend 动画结束事件*/ document.querySelector('div').addEventListener('animationend',function(){
console.log('animationend');
});
</script>
</body>
</html>
效果截图：
这两个事件就可以解决不使用接触类做的动画，也能监听到每一次动画的过渡跟结束，来做其他事情。
