如下8個:
<transitionv-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"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="../node_modules/animate.css/animate.css"><style>.ball {width: 15px;height: 15px;border-radius: 50%;background-color: red;}</style>
</head><body><div id="app"><input type="button" value="快到碗里來" @click="flag=!flag"><transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"><div class="ball" v-if="flag"></div></transition></div><script src="../node_modules/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false},methods: {beforeEnter(el) {// 設置小球 開始動畫的起始位置el.style.transform = "translate(0,0)"},enter(el, done) {// el.offsetWidth 會強制動畫刷新el.offsetWidth;el.style.transform = "translate(150px, 450px)";el.style.transition = "all 1s ease";// done是afterEnter函數的引用...表示結束了 立即調用afterEnter()done()},afterEnter(el) {this.flag = false;}},})</script>
</body></html>
的各種神仙動畫效果)
