钩子函数动画
开始动画的设置含义( 同结束动画 )
v-on:before-enter
表示动画入场之前,此时动画还未开始,可以在其中设置元素开始动画之前的起始样式v-on:enter
表示动画,开始之后的样式,可以设置完成动画的结束状态v-on:after-enter
表示动画完成之后的状态v-on:enter-cancelled
用于取消开始动画的
<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>
实例:
css
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
margin-top: 20px;
}
body
<div id="app">
<input type