本文介绍5分钟学习Vue动画效果(总结)，分享给大家，具体如下：

1.在这些条件下，哪些元素/组件适用于动画

条件渲染(使用v-if)条件显示(使用v-show)动态组件根节点的简单经典示例：(文本隐藏以显示效果)

div按钮@click='show=！Show' show toggle/button过渡名称=' fade '/fade自定义名称p v-if=' show ' hello/p/transition/div style . fade-enter-active { transition :不透明度. 5s；//类名：隐藏显示进程所需的时间}。淡入{//类名：初始化状态opa city 3360 0；}/style自己画了一个过渡动画生命周期，表示：动画开始、过程、结束、类名有效和无效

隐藏以显示，显示以隐藏过程

Css动画

div按钮@click='show=！Show' show toggle/button过渡名称=' fade'//fade自定义名称p v-if=' show ' hello/p/transition/div style。淡入激活{//类名：隐藏到显示过程所需的时间animation:弹入. 5s；}.淡入淡出激活{//类名：显示隐藏过程动画：弹入. 5s反转所需的时间；//reverse表示与隐藏显示动画相反的意思} @关键帧弹入{ 0% { transform : scale(0)；} 50% { transform:比例尺(1.5)；} 100% { transform:比例尺(1)；}}/style我们还可以自定义类名

div按钮@click='show=！show ' show toggle/button transition enter-class=' fade enter ' enter-active-class=' fade active '/fade自定义名称p v-if=' show ' hello/p/transition/div style。渐变活动{transition :不透明度. 5s；//类名：隐藏显示进程所需的时间}。fadeEnter {//类名：初始化状态opa city 3360 0；}/style了解到这一点之后，我们实际上可以参考第三方库来实现这一效果，Animate.css

//介绍animation . CSS link href=' https://cdn . jsdeliver . net/NPM/[email protected]' rel=' external no follow ' rel='样式表' type=' text/CSS '/div button @ click=' show=！show ' show toggle/button transition enter-active-class=' animated tada ' leave-active-class=' animated bouncheeoutright ' p v-if=' show ' hello/p/transition/Div文本抖动效果科学是通过使用css在这里实现Vue动画效果来实现的。如果以后有时间补充，用js来实现这个效果。这样做的好处是，在需要引用的地方封装组件更方便快捷。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。