动画 与 过渡

CSS3 transition 过渡

缓动效果：线性、慢进、慢出、贝塞尔曲线cubic-bezier
Vue中， 使用可以在 元素插入和移除时，添加过渡效果

CSS3 animation 关键帧动画

效果：可以设置多个关键帧
Vue中， 使用可以在 元素插入和移除时，添加关键帧动画

使用动画：animation: myfirst 5s;    参数为动画名和动画时间

定义动画：

                         @keyframes myfirst
                         {
                                from   {background: red;}
                                50%  {background: blue;}
                                to  {background: green;}
                         }

动画循环：animation-iteration-count（循环次数），animation-direction（是否往返循环）

动画事件：
                                

element.addEventListener("animationstart", listener, false);         // 监听动画开始事件，listener为事件处理函数
element.addEventListener("animationend", listener, false);          //动画结束
element.addEventListener("animationiteration", listener, false);  //动画新一周期开始

Velocity.js  脚本动画

效果：链式动画（给一个元素连续添加多个动画）、循环、回放、各种缓动曲线
Vue中，的钩子（元素插入前事件、元素插入后事件、元素移除前事件、元素移除后事件）可以调用Velocity.js，实现脚本动画
Velocity 缓动
1、预设的缓动曲线：参考 https://easings.net/  ，包括 反弹、起跳等效果
2、CSS3 transition 支持的缓动曲线，即慢近慢出、贝塞尔曲线
3、物理学弹性效果：缓动模式设置成'spring'，或者具体的[tension（张力）,friction（摩擦力）]
4、跳跃效果：缓动模式设置成 [steps（步数）]

注意：

针对同一个元素的同一个样式，跟transition不能叠用

有些transitio支持的过渡，Velocity不支持，比如背景颜色

Animate.css 预设的动画样式

场景：原地晃动、渐入渐出

缓动效果：弹跳、显隐、滑动、滚动、扭动、旋转、翻转、缩放、摆动
Vue中，给加上Animate.css的类，即可应用动画

注意：

同一个位置，元素A滚出，同时元素B滚入；元素A滚出前，要置为绝对定位，否则会占住位置。

对比选型：

简单过渡用transition

只考虑原地晃动 和 渐入渐出，使用Animate.css

在一定范围内运动，使用Velocity.js