vue --- 动画执行的周期(动画的钩子函数)
生活随笔
收集整理的這篇文章主要介紹了
vue --- 动画执行的周期(动画的钩子函数)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如下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> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue --- 动画执行的周期(动画的钩子函数)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring MVC Ajax返回中文乱
- 下一篇： html5倒计时秒杀怎么做,vue 设