鉤子函數實現小球彈落

鉤子函數實現小球彈落

 .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }

<div id="app">
    <input type="button" value="快到碗里來" @click="flag=!flag">
    <!-- 1. 使用 transition 元素把 小球包裹起來 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" 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
        }
      }
    });