<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.j
s"></script> <script src="Velocity.js"></script></head><body> <div id="app"> <transition @before-enter="handBeforeEnter" @enter="handEnter" @after-enter="handAfterEnter" @before-leave="handBeforeLeave" @leave="handLeave" @after-leave="handAfterLeave"> <div v-show="show">hello world</div> </transition> <button @click="handldClick">点击</button> </div> <script> var vm = new Vue({ el : '#app', data : { show: true }, methods : { handldClick : function () { this.show = !this.show }, handBeforeEnter : function (el) { el.style.opacity = 0 }, handEnter : function (el, done) { Velocity(el, { opacity : 1 }, { duration :1000, complete:done }) }, handAfterEnter : function (el) { console.log('动画结束') } } }) </script></body></html>
