动画-钩子函数实现小球半场动画

定义一个按钮来控制动画

<input type="button" value="快到碗里来" @click="flag=!flag">

使用 transition 元素把 小球包裹起来

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
  <div class="ball" v-show="flag"></div>
</transition>

下面将分别定义这3个钩子函数来控制动画

注意: 动画钩子函数的第一个参数: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
}

完整实例代码如下:

<!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)"
        },
        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>

更多相关系列教程请及时关注妙笔生花个人博客,本网站由皮皮家园终身维护!
1.Vue.js 是什么?起步及安装
http://blog.zh66.club/index.php/archives/474/
2.Vue.js 声明式渲染
http://blog.zh66.club/index.php/archives/476/
3.vue.js 条件与循环
http://blog.zh66.club/index.php/archives/477/
4.vue.js 处理用户输入
http://blog.zh66.club/index.php/archives/478/
5.vue.js实现跑马灯效果
http://blog.zh66.club/index.php/archives/479/
6.vue.js 事件修饰符
http://blog.zh66.club/index.php/archives/480/
7.vue.js 表单输入绑定
http://blog.zh66.club/index.php/archives/481/
8.vue.js 简易的计算器
http://blog.zh66.club/index.php/archives/482/
9.vue.js 中样式的使用
http://blog.zh66.club/index.php/archives/483/
10.vue.js 之 v-forkey 属性
http://blog.zh66.club/index.php/archives/484/
11.vue.js 内容的总结和回顾
http://blog.zh66.club/index.php/archives/485/
12.vue.js 中 v-if 和 v-show 的使用
http://blog.zh66.club/index.php/archives/486/
13.vue.js 品牌案例~列表的添加删除功能
http://blog.zh66.club/index.php/archives/488/
14.vue.js 品牌案例~列表的关键字检索功能
http://blog.zh66.club/index.php/archives/489/
15.vue.js 过滤器的基本使用
http://blog.zh66.club/index.php/archives/491/
16.vue.js 自定义一个私有的过滤器
http://blog.zh66.club/index.php/archives/490/
17.vue.js 过滤器以及 padStart 和 padEnd
http://blog.zh66.club/index.php/archives/499/
18.vue.js 自定义按键修饰符
http://blog.zh66.club/index.php/archives/500/
19.vue.js 自定义全局指令
http://blog.zh66.club/index.php/archives/501/
20.vue.js 自定义私有指令
http://blog.zh66.club/index.php/archives/502/
21.vue.js 指令函数的简写形式
http://blog.zh66.club/index.php/archives/503/
22.vue.js 生命周期函数演示
http://blog.zh66.club/index.php/archives/492/
23.vue.js 中 vue-resource 基本使用
http://blog.zh66.club/index.php/archives/493/
24.vue.js品牌列表-从数据库获取列表
http://blog.zh66.club/index.php/archives/506/
25.vue.js 品牌列表 - 完成添加功能
http://blog.zh66.club/index.php/archives/508/
26.vue.js 品牌列表 - 完成删除功能
http://blog.zh66.club/index.php/archives/510/
27.vue.js 品牌列表 - 全局配置数据接口的根域名
http://blog.zh66.club/index.php/archives/512/