Vue过渡
Vue动画相比较css中的动画比较复杂一些，需要用到新的类名
下面是官网给出的解释：
过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
看个例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <button type="button" @click="show=!show">点击我及消失</button> <h1 v-if="show">Nanchen消失不见</h1> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data(){ return{ show:true, } }, }) </script> </body> </html>
效果如下：
这样显得比较僵硬，这时就需要一个过渡效果来解决生硬问题
把需要进行过渡的标签外套上一个<transition>,例如：
<transition> <h1 v-if="show">Nanchen消失不见</h1> </transition>
这里写上name以便对过渡效果名相匹配，如果不写name，则需在类名前加v-，这里建议写上name防止多个动画发生冲突
<transition name="fade"> <h1 v-show="isShow">Nanchen消失不见</h1> </transition>
CSS样式：
.fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; }
效果如下:
Vue动画
CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style type="text/css"> button{ display: block; } h1{ border: 1px solid black; display: inline-block; } @keyframes carroon{ 0%{ transform: translate(0,0); } 25%{ transform: translate(0,100px); } 50%{ transform: translate(100px,100px); } 75%{ transform: translate(100px,0); } 100%{ transform: translate(0,0); } } /* 注意：这里是animation而不是transition */ .carroon-leave-active{ animation: carroon 1s; } .carroon-enter-active{ animation: carroon 1s; } </style> </head> <body> <div id="app"> <button type="button" @click="btnClick">点击执行动画</button> <transition name="carroon"> <h1 v-show="isShow">一个盒子</h1> </transition> </div> <script type="text/javascript"> const vm = new Vue({ el: '#app', data() { return { isShow: true } }, methods: { btnClick() { this.isShow = !this.isShow } } }) </script> </body> </html>
效果如下：
同时使用过渡和动画
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。
但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
初始渲染的过渡
可以通过 appear 特性设置节点在初始渲染的过渡
<transition appear> <!-- ... --> </transition> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <style> .fade-enter,.fade-leave-to { opacity: 0; } .fade-enter-active,.fade-leave-active { transition: opacity 1s; } </style> </head> <body> <div id="databinding"> <transition :duration="{ enter: 5000, leave: 10000 }" name="fade" type="transition" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing"> <p v-if="show">动画</p> </transition> <button v-on:click="show = !show">点我</button> </div> <script type="text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script> </body> </html>
效果如下：
关于router的过渡动效
把<router-view>标签用<transition>标签包裹起来即可
加一个name的值，加了值后开头必须以test-......
<transition name="test"> <router-view></router-view> </transition>
再在下面设置style样式即可
.test-enter, .test-leave-to { opacity: 0; } .test-enter-to, .test-leave { opacity: 1; } .test-enter-active, .test-leave-active { transition: all 1s; }
即可实现页面之间的过渡效果
