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

發(fā)布時(shí)間：2020-08-29 20:43:23 來源：腳本之家閱讀：263 作者：章魚喵_ 欄目：web開發(fā)

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

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

完整代碼

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 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í)行動(dòng)畫的那個(gè)DOM元素, 是原生的 js DOM 對(duì)象
      beforeEnter(el) {
        // 設(shè)置動(dòng)畫開始之前的初始位置
        el.style.transform = "translate(0, 0)"
      },
      enter(el, done) {
        // 刷新動(dòng)畫效果
        el.offsetWidth;
        // 動(dòng)畫完成后的樣式
        el.style.transform = "translate(550px, 350px)";
        // 動(dòng)畫的持續(xù)時(shí)間
        el.style.transition = "all 3s ease";
        // done 其實(shí)是 afterEnter() 的引用
        done();
      },
      afterEnter(el) {
        // 動(dòng)畫完成之后調(diào)用
        this.flag = !this.flag
      }
    }
  })
</script>
</body>
</html>

最終效果：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽