Vue复习transition动画以及animatecss动画库的使用
1、切换的动画
2、transition的使用
3、transition的几个动画类名的理解
.myfade-enter：进入过渡动画的开始状态，元素被插入时即生效（运动的初始状态） .myfade-enter-active：进入过渡动画的结束状态，这一部分在整个过渡阶段中应用，元素被插入之前生效，在过渡动画完成之后移除。 .myfade-enter-to：在元素被插入之后下一帧生效（此时.myfade-enter移除），过渡动画完成之后移除 .myfade-leave：定义离开过渡的开始状态，在离开过渡被触发时立刻生效。 .myfade-leave-active： 定义离开过渡生效时的状态，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。 .myfade-leave-to：在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除
css渐入渐出动画3.1、对应的状态过程： opacity : 0 -> 1对应此时动画开始.myfade-enter->.myfade-enter-active->.myfade-enter-to opacity : 1 -> 0对应结束.myfade-leave->.myfade-leave-active->.myf
ade-leave-to
3.2、结论： 根据上面的过渡形式：在.myfade-enter-active和.myfade-leave-active的过程中是可以控制进入和离开的动画曲线的。 需要注意的是：如果transition没有添加名字，那么动画效果就需要是v-开头。
4.1、安装或者link引入
•link引入
4.2、main.js全局引入
import animated from 'animate.css'; Vue.use(animated)
4.3、组件中使用
4.4、当不希望使用时的卸载操作 npm uninstall animate.css --save 4.5、动画效果演示 
animate.css动画库.gif

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。