本文主要介绍5分钟学习Vue的动画效果(总结)。边肖认为这很好。现在分享给大家,给大家一个参考。来和边肖一起看看吧。
本文介绍了5分钟学习Vue的动画效果(总结),分享给大家,如下:
1.在那些条件下,哪些元素/组件适合制作动画?
条件渲染(使用v-if)
展示条件(使用垂直展示)
动态组件
组件根节点
一个经典的例子:(文字隐藏到显示效果)
差异
button @click=show=!“显示”显示开关/按钮
过渡名称=fade //fade自定义名称
p v-if=showhello/p
/过渡
/div
风格。淡入激活{
过渡:不透明度. 5s;//类名:隐藏到显示过程所需的时间
}。fade-enter {//类名:初始化状态
不透明度:0;
}
/风格
我画了一个过渡的动画生命周期,标明:动画的开始、过程和结束,类名变成有效和无效。
隐藏到显示,显示到隐藏过程
Css动画
差异
button @click=show=!“显示”显示开关/按钮
过渡名称=fade //fade自定义名称
p v-if=showhello/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=showhello/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=showhello/p
/过渡
/div
这里用css实现Vue动画效果来实现角色抖动效果。如果后面有时间补充,可以用js来达到这个效果。好处是可以在需要引用的地方封装一个组件,更加方便快捷。
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。