vue.js動畫中的js鉤子函數(shù)的實現(xiàn)

更新時間：2018年07月06日 14:22:05 作者：章魚喵_

這篇文章主要介紹了vue.js動畫中的js鉤子函數(shù)的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在transition中還可以通過設(shè)置javascript鉤子函數(shù)，實現(xiàn)自定義動畫效果。

以實現(xiàn)擊球效果為例：

擊球

代碼解析：

<!-- 定義js的鉤子函數(shù) -->
<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 表示要執(zhí)行動畫的那個DOM元素, 是原生的 js DOM 對象
    beforeEnter(el) {
      // 設(shè)置動畫開始之前的初始位置
      el.style.transform = "translate(0, 0)"
    },
    enter(el, done) {
      // 刷新動畫效果
      el.offsetWidth;
      // 動畫完成后的樣式
      el.style.transform = "translate(550px, 350px)";
      // 動畫的持續(xù)時間
      el.style.transition = "all 3s ease";
      // done 其實是 afterEnter() 的引用
      done();
    },
    afterEnter(el) {
      // 動畫完成之后調(diào)用
      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的鉤子函數(shù) -->
    <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 表示要執(zhí)行動畫的那個DOM元素, 是原生的 js DOM 對象
      beforeEnter(el) {
        // 設(shè)置動畫開始之前的初始位置
        el.style.transform = "translate(0, 0)"
      },
      enter(el, done) {
        // 刷新動畫效果
        el.offsetWidth;
        // 動畫完成后的樣式
        el.style.transform = "translate(550px, 350px)";
        // 動畫的持續(xù)時間
        el.style.transition = "all 3s ease";
        // done 其實是 afterEnter() 的引用
        done();
      },
      afterEnter(el) {
        // 動畫完成之后調(diào)用
        this.flag = !this.flag
      }
    }
  })
</script>
</body>
</html>

最終效果：