Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/ 离开过渡。 条件渲染 (使用 v-if)。 条件展示 (使用 v-show)。 动态组件。 组件根节点。 语法格式如下： <transition name = "nameoftransition"> <div></div> </transition>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="demo"> <button v-on:click="show = !show"> 点我 </button> <transition name="fade"> <p v-if="show">动画实例</p> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> </body> </html>
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删 除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插 入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概 念不同)。
过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换： 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是 这些类名的默认前缀。例如你使用了 <transition name="my-transition">，那么 v-enter 会替换 为 my-transition-enter。
常用的 Vue 过渡效果都是使用 CSS 过渡 transition。我们首先看一个简单的切换显示按 钮，代码如下： <div id="app"> <button @click="show=!show">点我</button> <div v-if="show">Hello world</div> </div> <script> new Vue({ el: '#app', data: { show: true } }) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .v-enter{ opacity: 0; } .v-enter-active{ transition: opacity 3s; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="app"> <button @click="show=!show">点我</button> <transition > <div v-if="show">Hello world</div> </transition> </div> <script> new Vue({ el: '#app', data: { show: true } }) </script> </body> </html>
当然只是这样也是无法形成过渡效果的。仍需在 transition 标签中添加 class 样式，只不过 class 样式不需要我们手动添加，Vue 在运行中会自动的构建一个动画的流程
当动画执行的一瞬间，会自动在 div 上增加两个 class 名字，分别是 fade-enter 和 fade-enter-active，因为 transiton 标签 name 是 fade。
当动画运行到第二帧时，Vue 又会把 fade-enter 删除，然后添加一个 fade-enter-to，再当动画执行到结束的一瞬间，又把 fade-enter-active 和 fade-enter-to 删除掉。
CSS动画animation用法同CSS过渡transition，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .bounce-enter-active{ animation:bounce-in .5s; } .bounce-leave-active{ animation:bounce-in .5s reverse; } @keyframes bounce-in{ 0%{transform:scale(0);} 50%{transform:scale(1.5);} 100%{transform:scale(1);} } </style> </head> <body> <div id="app"> <button v-on:click="show = !show">点我</button> <transition name="bounce"> <p v-if="show">Hello World</p> </transition> </div> <script> new Vue({ el: '#app', data: { show: true } }) </script> </body> </html>
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果使用其中任何一种，Vue 能自动识 别类型并设置监听。
在一些场景中，需要给同一个元素同时设置两种过渡动效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .fade-enter,.fade-leave-to{ opacity:0; } .fade-enter-active,.fade-leave-active{ transition:opacity 1s; animation:bounce-in 5s; } @keyframes bounce-in{ 0%{transform:scale(0);} 50%{transform:scale(1.5);} 100%{transform:scale(1);} } </style> </head> <body> <div id="app"> <button v-on:click="show = !show">点我</button> <transition name="fade" type="transition"> <p v-if="show">Hello World</p> </transition> </div> <script> new Vue({ el: '#app', data: { show: true, }, }) </script> </body> </html>
我们可以通过以下特性来自定义过渡类名：
enter-class
enter-active-class
leave-class
leave-active-class
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库， 如 Animate.css 结合使用十分有用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .fade-in-active, .fade-out-active{ transition: all 1.5s ease } .fade-in-enter, .fade-out-active{ opacity: 0 } </style> </head> <body> <div id="app"> <button @click="show = !show"> 点我 </button> <transition name="fade" enter-class="fade-in-enter" enter-active-class="fade-in-active" leave-class="fade-out-enter" leave-active-class="fade-out-active" > <p v-show="show">hello</p> </transition> </div> <script> new Vue({ el: '#app', data: { show: true } }) </script> </body> </html>
除了用CSS过渡的动画来实现Vue的组件过渡，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM。可以在属性中声明 JavaScript 钩子，代码如下： <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Velocity 和 jQuery.animate 的工作方式类似,也是用来实现 JavaScript 动画的一个很棒的选择 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> </head> <body> <div id="app"> <button @click="show = !show"> 点我 </button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show"> Hello </p> </transition> </div> <script> new Vue({ el: '#app', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.transformOrigin = 'left' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } } }) </script> </body> </html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
