<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> #ball { width: 20px; height: 20px; border-radius: 50%; background: pink; } </style> </head> <!-- vue影片的js鉤子函式相當于影片的生命周期函式 ，before-enter:進入之前觸發 ，after-enter：進入后觸發 ，enter-cancelled：結束進入階段 ，before-leave:進入之前觸發 ，after-leave：進入后觸發 ，leave-cancelled：結束進入階段 --> <!-- 本例子只需進入階段的影片效果 --> <body> <div id="app"> <input type="button" value="點我" @click="flag=!flag"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div id="ball" v-show="flag"></div> </transition> </div> </body> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: {//初始小球不顯示 flag: false }, methods: { // el 即操作的元素物件 beforeEnter(el) { el.style.transform='translate(0,0)';//初始小球位置 }, enter(el){ //必須加下面一行，否則不會出現應有的效果 el.offsetWidth;//這里可以理解成強制瀏覽器重繪，也可以寫el.offsetHeight el.style.transition='all 1.5s ease'; el.style.transform='translate(150px,250px)'; }, afterEnter(el){ console.log('ok'); this.flag=false;//隱藏小球 } } }); </script> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/121985.html
標籤：Html/Css
下一篇：CSS 選擇器大全