vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)

Love The Way You Lie 2023-06-29 05:53 6阅读 0赞

## 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">
        
        <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)"
            },
            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
            }
          }
        });
      </script>
    </body>
    
    </html>