这篇文章主要介绍了怎么使用vue实现动画效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用vue实现动画效果文章都会有所收获，下面我们一起来看看吧。
Vue封装的过度与动画
1.作用
在插入，更新，移除DOM元素时,在合适的时候给元素添加样式类名。
2.写法
准备好样式:元素进入的样式
<template> <div> <button @click="isShow = !isShow">隐藏展示</button> <transition name="hidden" appear> <h2 v-show="isShow">隐藏展示</h2> </transition> </div></template><script>export default { name: "Test", data() { return { isShow: true }; }};</script><style scoped>h2 { background-color: orange;}.hidden-enter-active { animation: shanyu 1s;}.hidden-leave-active { animation: shanyu 1s reverse;}@keyframes shanyu { from { transform: translateX(-100%); } to { transform: translateX(0px); }}</style>
3.样式
需要先有这个animate.css哦
npm i animate.css
v-enter:进入的起点
v-enter-active:进入过程中
v-enter-to:进入的终点
<template> <div> <button @click="isShow = !isShow">隐藏展示</button> <transition-group name="shanyu" appear> <h2 v-show="isShow" key = '1'>隐藏展示</h2> <h2 v-show="isShow" key = '2'>隐藏展示</h2> </transition-group> </div></template><script>export default { name: "Test2", data() { return { isShow: true }; }};</script><style scoped>h2 { background-color: rgb(139, 37, 255);}.shanyu-enter,.shanyu-leave-to { transform: translateX(-100%);}.shanyu-enter-active,.shanyu-leave-active{ transition: .5s linear;}.shanyu-enter-to,.shanyu-leave { transform: translateX(0);}</style>
元素离开的样式:
V-leave:离开的起点
V-leave-active:离开过程中
V-leave-to:离开的终点
使用<transition>包裹要过度的元素,并配置name属性
<transitionname="hello"> <h2v-show=" isShow">你好啊! </h2></transition>
备注:若有多个元素需要过度，则需要使用: <transition-group>, 且每个元素都要指定key值。
<transition-group name="shanyu" appear> <h2 v-show="isShow" key = '1'>隐藏展示</h2> <h2 v-show="isShow" key = '2'>隐藏展示</h2> </transition-group>
关于“怎么使用vue实现动画效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用vue实现动画效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
