<!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 动画的钩子函数的更多相关文章

  1. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  2. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

  3. Vue -自定义指令&钩子函数

    除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...

  4. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

  5. vue中的钩子函数的理解

    接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...

  6. Vue系列之 => 钩子函数生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  8. Vue指令的钩子函数使用方法

    在Vue 中可以把一系列复杂的操作包装为一个指令. 什么是复杂的操作? 我的理解是:复杂逻辑功能的包装.违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等.我们总是期望以操作数据的形式来实 ...

  9. vue父子组件钩子函数的执行顺序

    加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...

随机推荐

  1. Python结合OpenCV学习资料

    1.sunny2038的专栏  http://blog.csdn.net/sunny2038 作者建立了一个学习系列.讲得非常具体,有非常多的主要的图像处理实例. 2. https://github. ...

  2. tar解压.tar.bz2文件失败:tar: Error is not recoverable: exiting now

    使用tar解压.tar.bz2文件: tar -jxvf xxxx.tar.bz2 报如下错误: 原因:未安装bzip yum -y install bzip2

  3. Codeforces 439C

    题目链接 比赛时间没能通过==, 只能说明自己代码写的太不严谨咯! 解题思想就是贪心 先判断无解的情况: 1. 奇数不够,因为偶数是无法凑成奇数的 2. 偶数不够,2个奇数可以凑成一个偶数 3. 在奇 ...

  4. IOC容器和注入方式

    IOC和DI IOC: 反转资源获取的方向 DI: IOC的另一种表述反式,即组件以一些预先定义好的方式(例如:setter方法)接收来自如容器的资源注入 IOC容器对象的关联关系 IOC前生--分离 ...

  5. oracle-ORA-00942错误

    表或视图不存在 原因:1.表或视图真的不存在 2.用户没有访问该表的权限. ORA-01078: 处理系统参数失败 ORA-01438: value larger than specified pre ...

  6. python之浮点型类型

    浮点型:float 如3.14,2.88 class float(object): """ float(x) -> floating point number Co ...

  7. Directx11学习笔记【八】 龙书D3DApp的实现

    原文:Directx11学习笔记[八] 龙书D3DApp的实现 directx11龙书中的初始化程序D3DApp跟我们上次写的初始化程序大体一致,只是包含了计时器的内容,而且使用了深度模板缓冲. D3 ...

  8. Lib1vent：10链接监听器接受TCP链接

    evconnlistener机制提供了监听并接受TCP链接的方法.除非特别注明,本章的所有函数和类型都在event2/listener.h中声明. 一:创建或释放evconnlistener stru ...

  9. Quick BI独创千人千面的行级权限管控机制

    摘要 就数据访问权限而言,阿里巴巴以“被动式授权”为主,你需要什么权限就申请什么权限.但是,在客户交流过程中,我们发现绝大多数企业都是集中式授权,尤其是面向个人的行级权限管控,管理复杂度往往呈几何增长 ...

  10. python 空值（NoneType）