<div id="app">
<transition @before-enter="handleBeforeClick" @enter="handlEnterClick" @after-enter="handlAfterClick">
<div v-show="show">
{{mess}}
</div>
</transition>
<button @click="handleBtnClick">toggle</button>
</div>var app = new Vue({
el: "#app",
data: {
mess: "hello world",
show: true
},
methods: {
handleBtnClick: function () {
this.show = !this.show;
},
// 显示/入场 的时候执行,一个参数
handleBeforeClick: function (el) {
el.style.opacity = 0;
},
// 显示/入场 的时候执行，两个参数el,done(回调函数)
handlEnterClick: function (el, done) {
Velocity(
el,
{
opacity: 1
},
{
duration: 1000,
complete: done
}
);
},
handlAfterClick: function (el) {
alert("动画结束");
}
}
});
