本文主要介绍5分钟学习Vue的动画效果(总结)。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。
本文介绍了5分钟学习Vue的动画效果(总结)，分享给大家，如下：
1.在那些条件下，哪些元素/组件适合制作动画？
条件渲染(使用v-if)
展示条件(使用垂直展示)
动态组件
组件根节点
一个经典的例子：(文字隐藏到显示效果)
差异
button @click='show=！“显示”显示开关/按钮
过渡名称='fade' //fade自定义名称
p v-if='show'hello/p
/过渡
/div
风格。淡入激活{
过渡：不透明度. 5s；//类名：隐藏到显示过程所需的时间
}。fade-enter {//类名：初始化状态
不透明度：0；
}
/风格
我画了一个过渡的动画生命周期，标明：动画的开始、过程和结束，类名变成有效和无效。
隐藏到显示，显示到隐藏过程
Css动画
差异
button @click='show=！“显示”显示开关/按钮
过渡名称='fade' //fade自定义名称
p v-if='show'hello/p
/过渡
/div
风格。fade-enter-active {//类名：隐藏到显示进程所需的时间。
动画：弹入. 5s；
}。fade-leave-active {//类名：显示隐藏进程所需的时间。
动画：弹入. 5s反转；//reverse是隐藏显示动画的反义词。
}
@关键帧并轨{
0% {
transform:scale(0)；
}
50% {
变换：缩放(1.5)；
}
100% {
变换：缩放(1)；
}
}
/风格
我们还可以自定义类名
差异
button @click='show=！“显示”显示开关/按钮
transition enter-class=' fade enter ' enter-active-class=' fade active '//fade自定义名称
p v-if='show'hello/p
/过渡
/div
风格。fadeActive{
过渡：不透明度. 5s；//类名：隐藏到显示过程所需的时间
}。fadeEnter {//类名：初始化状态
不透明度：0；
}
/风格
在这里，我们其实可以参考一个第三方库来实现这个效果，Animate.css
//引入index.html文件下的Animate.css
link href=' https://cdn . jsdelivr . net/NPM/animate . CSS @ 3 . 5 . 1 ' rel=' external no follow ' rel=' style sheet ' type=' text/CSS '
//在组件内
差异
button @click='show=！“显示”显示开关/按钮
过渡
enter-active-class=' animated tada '
leave-active-class=' animated bounce outright '
p v-if='show'hello/p
/过渡
/div
这里用css实现Vue动画效果来实现角色抖动效果。如果后面有时间补充，可以用js来达到这个效果。好处是可以在需要引用的地方封装一个组件，更加方便快捷。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。