vue 半場動畫進入狀態
阿新 • • 發佈：2021-01-03
<style> .box{ width: 30px; height: 30px; border-radius: 50%; background: red; } </style> </head> <body> <div id="app"> <input type="button" value="加入購物車" @click="flag=!flag"> <!-- 使用元素把小球包裹起來 --> <!-- @before-enter 動畫入場之前，此時還沒有入場哈 @enter 表示動畫的執行時候的狀態 @after-enter 表示動畫結束之後的狀態 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="box" v-show="flag"></div> </transition> </div> <script> var vm=new Vue({ el:"#app", data:{ flag: false }, methods: { //動畫鉤子函式的第一個引數el 表示要執行的動畫的那個DOM元素 是一個原生的BOM物件 // 大家可以認為 el 是通過 document.getElementById來獲取的哦 beforeEnter(el){ //beforeEnte表示動畫入場之前 此時動畫還沒有完全的開始 // 此時設定開始動畫之前的起始樣子 el.style.transform="translate(0,0)" }, enter(el,done){// enter表示動畫開始之後的樣子 el.offsetWidth //這一句話沒有實際性的作用 但是如果不寫 效果就出不來 // 你可以認為 el.offsetWidth 是讓你看見動畫的效果 el.style.transform="translate(150px,450px)" el.style.transition="all 1s ease" //這裡的done 起始就是afterEnter這個函式， 也就是說done是afterEnter函式的引用 它就會自動呼叫下面這個函式 done() }, afterEnter(el){ // 動畫完成之後 就會呼叫這個函式 this.flag=!this.flag //最終讓這個小球消失 取反 讓小球消失 } }, }) </script>