本文主要介绍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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。