transition和animation的对比
transition和animation可以实现一些同样的效果。比如相关尺寸和透明度的变化。
transition和animation都可以用逗号分隔，针对1个以上的属性单独进行设定。
1 .div.opacity { 2 transition: width 1s, height 2s, opacity 3s; 3 opacity: 1; 4 300px; 5 height: 300px; 6 }
1 .div.animation { 2 animation: animation1 1s, animation2 2s, animation3 3s; 3 }
animation有更多的参数设置，区别于transition的是循环运动下去。
还有其他一些区别：
1，animation在从display:none切换到display:block时有效，但是transition无效
2，animation可以对中间过程进行更具体的设定，transition只能设置开始和结束
过渡的重要性
前端是会向着复杂度高的方向发展的。在我看来过渡是重要且不需要花很多时间就可以学会的。css3动画也可以做的很复杂。
为了实现transition从display:none切换到display:block有效，可以借助宏任务的requestAnimationFrame和setTimeout，实际上这两个方法也是vue过渡动画实现的基础。
但如果想要实现从display:block到display:none的过渡效果，则需要时间判断了，这个时候还是用seTimeout。