zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    CCF CSP 题解
    CCF CSP 2019032 二十四点
    CCF CSP 2018121 小明上学
    CCF CSP 2019092 小明种苹果(续)
    CCF CSP 2019091 小明种苹果
    CCF CSP 2019121 报数
    CCF CSP 2019031 小中大
    CCF CSP 2020061 线性分类器
    CCF CSP 2020062 稀疏向量
    利用国家气象局的webservice查询天气预报(转载)
  • 原文地址:https://www.cnblogs.com/wanguofeng/p/11238413.html
Copyright © 2011-2022 走看看