<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" type="text/css"> <div> <button @click="show = !show">toggle coustom class</button> <transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight"> <p v-if="show">自定义过渡类名</p> </transition> </div>
new Vue({ el:'#app4', data:{ show:true } })
运行结果：
animate.css的学习可以参考官网：https://daneden.github.io/animate.css/
javascript钩子
可以在属性中声明 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>
methods: { // -------- // 进入中 // -------- beforeEnter: function (el) { // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候， 在 enter和leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
一个使用 Velocity.js 的简单例子：
<div> <button @click="show = !show">toggle hook</button> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"> <p v-if="show">javascript 钩子使用</p> </transition> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script > new Vue({ el:'#app5', 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>
运行结果：
初始渲染的过度
可以通过appear 特性设置节点的在初始渲染的过渡
这里默认和进入和离开过渡一样，同样也可以自定义 CSS 类名。
<transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" appear-active-class="custom-appear-active-class"> <!-- ... --> </transition>
自定义 JavaScript 钩子：
<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition>
示例代码：
<!--初始渲染--> <div> <transition appear appear-active-class="animated tada"> <p>初始画面</p> </transition> </div>
new Vue({ el:'#app6', data:{ show:true } })
运行结果：
在界面加载该元素时，会有个过渡效果。