vue.js動畫中的js鉤子函數的實現

2019-11-19 13:32:31

字體：大中小

來源：轉載

供稿：網友

在transition中還可以通過設置javascript鉤子函數，實現自定義動畫效果。

以實現擊球效果為例：

擊球

代碼解析：

<!-- 定義js的鉤子函數 --><transition  @before-enter="beforeEnter"  @enter="enter"  @after-enter="afterEnter">  <img v-show="flag" class="ball" :src="ball" alt="" width="30"></transition>

let vm = new Vue({  el: "#app",  data: {    flag: false,    ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'  },  methods: {    // el 表示要執行動畫的那個DOM元素, 是原生的 js DOM 對象    beforeEnter(el) {      // 設置動畫開始之前的初始位置      el.style.transform = "translate(0, 0)"    },    enter(el, done) {      // 刷新動畫效果      el.offsetWidth;      // 動畫完成后的樣式      el.style.transform = "translate(550px, 350px)";      // 動畫的持續時間      el.style.transition = "all 3s ease";      // done 其實是 afterEnter() 的引用      done();    },    afterEnter(el) {      // 動畫完成之后調用      this.flag = !this.flag    }  }})

完整代碼

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <link  rel="external nofollow" rel="stylesheet">  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><style>  .container {    margin-top: 2%;  }  img.ball {    margin-left: 3%;  }</style><body><div class="container">  <div id="app">    <button class="btn btn-danger" @click="flag=!flag">擊球</button>    <!-- 定義js的鉤子函數 -->    <transition      @before-enter="beforeEnter"      @enter="enter"      @after-enter="afterEnter"    >      <img v-show="flag" class="ball" :src="ball" alt="" width="30">    </transition>  </div></div><script>  let vm = new Vue({    el: "#app",    data: {      flag: false,      ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'    },    methods: {      // el 表示要執行動畫的那個DOM元素, 是原生的 js DOM 對象      beforeEnter(el) {        // 設置動畫開始之前的初始位置        el.style.transform = "translate(0, 0)"      },      enter(el, done) {        // 刷新動畫效果        el.offsetWidth;        // 動畫完成后的樣式        el.style.transform = "translate(550px, 350px)";        // 動畫的持續時間        el.style.transition = "all 3s ease";        // done 其實是 afterEnter() 的引用        done();      },      afterEnter(el) {        // 動畫完成之后調用        this.flag = !this.flag      }    }  })</script></body></html>

最終效果：