鉤子函式實作小球彈落
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
<div id="app">
<input type="button" value="https://www.cnblogs.com/ygjzs/p/快到碗里來" @click="flag=!flag">
<!-- 1. 使用 transition 元素把 小球包裹起來 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div v-show="flag"></div>
</transition>
</div>
// 創建 Vue 實體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意： 影片鉤子函式的第一個引數：el，表示 要執行影片的那個DOM元素，是個原生的 JS DOM物件
// 大家可以認為 ， el 是通過 document.getElementById('') 方式獲取到的原生JS DOM物件
beforeEnter(el){
// beforeEnter 表示影片入場之前，此時，影片尚未開始，可以 在 beforeEnter 中，設定元素開始影片之前的起始樣式
// 設定小球開始影片之前的，起始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done){
// 這句話，沒有實際的作用，但是，如果不寫，出不來影片效果；
// 可以認為 el.offsetWidth 會強制影片重繪
el.offsetWidth
// enter 表示影片 開始之后的樣式，這里，可以設定小球完成影片之后的，結束狀態
el.style.transform = "translate(150px, 450px)"
el.style.transition = 'all 1s ease'
// 這里的 done， 起始就是 afterEnter 這個函式，也就是說：done 是 afterEnter 函式的參考
done()
},
afterEnter(el){
// 影片完成之后，會呼叫 afterEnter
// console.log('ok')
this.flag = !this.flag
}
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/176553.html
標籤：JavaScript
上一篇：vue-基本影片
下一篇：vue-串列影片