Vue 动画的钩子函数

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

  <style>

    .ball {

      width: 15px;

      height: 15px;

      border-radius: 50%;

      background-color: red;

    }

  </style>

</head>

<body>

  <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>

  <script>

    // 创建 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)",

          console.log('动画开始---')

        },

        enter(el, done){

          // 注意：这句话，没有实际的作用，但是，如果不写，出不来动画效果；

          //      可以认为 el.offsetWidth 会强制动画刷新

          el.offsetWidth

          // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态

          el.style.transform = "translate(150px, 450px)"

          el.style.transition = 'all 5s ease',

          console.log('动画执行中---')

          // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用

          done()

        },

        afterEnter(el){

          // 动画完成之后，会调用 afterEnter

          // console.log('ok')

          this.flag = !this.flag

          console.log('动画执行完---')

        }

      }

    });

  </script>

</body>

</html>
巴特西

Vue 动画的钩子函数

最新文章

热门文章
