有时候，我们需要在某一个div的动画执行之后，再执行另一个div的动画。
这个时候可以用到这个代码：
deviceM.style.animation = 'display 0.4S ease-out 0.4S'ease-out表示动画延迟0.4S执行。
但是，有问题的是，动画只是负责实现一个切换功能，动画并不能更改它归属盒子的属性。
比如说下面的JS代码：
if (flag) {
closeDevice.src = './images/drop.png'
deviceCate.style.transition = 'all 1.2S'
deviceCate.style.height = '61px'
deviceM.style.animation = 'hide 0.2S'
deviceM.style.opacity = 0
return flag = false
}
else {
closeDevice.src = './images/pull.png'
deviceCate.style.transition = 'all 1.2S'
deviceCate.style.height = '342px'
deviceM.style.animation = 'display 0.4S ease-out 0.4S'
return flag = true
}注意看else的功能实现。
我预想的是，在deviceM执行完动画之后，再更改它的opacity值，让它的出现显得不那么突兀。但是这个时候，如果我把这个代码写在执行完动画后的下一行，然后再执行代码，就会出现下面的情况：
deviceCate动画一开始执行的时候，0S的时候就会直接出现deviceM，然后0.4S之后deviceM再执行display动画，再0.4S之后动画执行完毕，显示deviceM。
这个时候，我看到的画面是一闪，然后动画执行，缓慢出现deviceM，然后再一闪。
但，这个过程并不是我想要的结果，我要的执行顺序是下面这个：
deviceCate动画一开始的时候，过了0.4S之后deviceM才执行display动画，但是在0S的时候，deviceM是不显示的，只有在动画开始之后deviceM才会显示。
也就是说，在deviceCate执行之后，再过大概0.8S，系统才继续执行deviceM透明度更改的代码。
我预想看到的效果是：deviceCate动画执行了0.4S之后，系统才执行deviceM的动画，然后再过0.4S之后，系统执行完deviceM的动画。这个时候如果不把deviceM的opacity值改为1，deviceM会消失，然后这个时候（0.8S的时候），我们再修改它的值就可以完美接上上面的动画执行。
一开始的时候，我首先想到了animation-delay，但是很明显，这个是不行的。
这个代码只会执行一次，在第二次执行这个代码时就会失效，所以只能考虑别的代码了。
所以这个时候，只能换一种方式了。
换什么方式好？
我找了很久，都没找到我需要的方式，后来想到我们可以通过setTimeOut的方式来进行延迟执行该代码。
于是就有了下面这段：
setTimeout(function () {
deviceM.style.opacity = 1
}, 800)完美解决问题，在deviceM动画执行之后，再更改了它的透明度，然后延迟执行的时间，跟动画时间保持一致，不会出现突现的情况。