vue会自动加上类名 v-enter 中间 vue会自动加上类名 v-enter-active
中间vue会自动加上类名 v-leave-active 最后vue会自动加上类名 v-leave-to
使用transition组件包裹需要切换的组件或元素，通过操作类名来完成过渡与动画的效果（此时其实就是在css里面写效果） css代码
<style> .box{ width: 200px; height: 200px; background-color: blueviolet; margin: 50px auto; } //控制的是消失到显示 沿着x轴向左位移600px 旋转360度 .animation-enter{ opacity: 0; transform: translateX(-600px) rotate(360deg); } .animation-enter-active,.animation-leave-active{ transition:all 2s } //控制的是显示到消失 沿着y轴向下位移300px 旋转360度 .animation-leave-to{ opacity: 0; transform:translateY(300px) scale(0.1) } </style>html代码
<body> <div id="app"> <button @click="isShow = !isShow"> {{ isShow?"隐藏":"显示" }} </button> //这里一定要用transition这个组件包裹住要做过渡或者动画的元素 <transition name="animation"> <div class="box" v-show="isShow"> </transition> </div> </div> </body>js代码
<script> let vm= new Vue({ el:'#app', data: { isShow: false } }) </script>注意：
transition 组件 只能控制 单个元素动画使用v-if v-else-if v-else 多个平行，可以控制（但是单个元素，同时只显示一个） 注意： 如果v-if控制的是相同标签的元素，那么每个元素必须添加key，不然更新虚拟dom时,实际上只是更改了元素的类名通过v-if v-else 的动画，需要定义mode属性 out-in （常用的） 当前元素先进行过渡，完成之后新元素过渡进入 in-outs 新元素先进行过渡，完成后当前元素过渡进入<transition name="animation" mode="out-in"> <div class="box" v-if="isShow"></div> <div class="box2" v-else></div> </transition>下载别人写好的css文件 引入 animate.css就OK
animation: name(动画名称) duration(持续时间) delay(延迟时间) animation-count(次数) n / infinite animation-direction(动画方向) normal / reverse /alternate /alternate-reverse animation-fill-mode(动画的填充模式) forward / backward / both animation-play-state(控制动画的开始暂停)示例
<link rel="stylesheet" href="./animate.css">//引入css文件 <style> .box{ width: 200px; height: 200px; background-color: red; } /* 在 enter 和 leave 的动画效果里 用的其实是别人写好的动画效果 入场：找 entrances的效果 出场：找exits的效果 */ .animation-enter-active{ animation:1s zoomInDown; } .animation-leave-active{ animation:1s zoomPutDown; } </style>用来做列表动画
使用：直接使用transition-group组件包裹多个元素
<transition-group > <li></li> <li></li> <li></li> </transition-group>