钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期

  1. <transition
  2.   v-on:before-enter="beforeEnter"
  3.   v-on:enter="enter"
  4.   v-on:after-enter="afterEnter"
  5.   v-on:enter-cancelled="enterCancelled"
  6.  
  7.   v-on:before-leave="beforeLeave"
  8.   v-on:leave="leave"
  9.   v-on:after-leave="afterLeave"
  10.   v-on:leave-cancelled="leaveCancelled"
  11. >
  12.   <!-- ... -->
  13. </transition>

实现购物车案例

  1. <input type="button" value="toggle" @click="flag=!flag"/>
  2.    //使用duration来统一设置入场和离场时候动画
  3.    //还可以分别设置 :duration="{enter:200,leave:400}"
  4.    <transition
  5.        @before-enter="beforeEnter"
  6.        @:enter="enter"
  7.        @:after-enter="afterEnter">
  8.       <div class="ball" v-show="flag"></div>
  9.    </transition>
  10.  
  11.  
  12. var vm=new Vue({
  13.   el: '#app',
  14.   data:{
  15.    flag:false
  16.   },
  17.   methods:{
  18.     //el表示执行动画的那个dom元素,是个元素的dom对象
  19.     //大家可以认为el是通过docoment.getElementById()获取后的dom对象
  20.     beforeEnter(el){
  21.         //beforeEnter表示动画入场之前,此时动画尚未开始,可以在beforeEnter中设置动画开始之前的样式
  22.         el.style.transform="translate(0,0)";
  23.     },
  24.     enter(el,done){
  25.       //动画开始之后的样式
  26.       //这句话没有实际作用,但如果不写动画效果出不来
  27.       //可以认为 el.offsetWidth会强制动画刷新
  28.       el.offsetWidth;
  29.       el.style.transform="translate(150px,450px)";
  30.       el.style.transition="all in ease";
  31.       //写了这个才会调用afterEnter函数,done是一个函数的引用
  32.       done();
  33.     },
  34.     afterEnter(el){
  35.       //动画完成之后调用
  36.        this.flag=!this.flag;
  37.     }
  38.   }
  39. })

vue动画使用javascript钩子函数的更多相关文章

  1. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

  2. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  3. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

    1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...

  5. Vue 路由知识三(过渡动画及路由钩子函数)

    路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...

  6. vue之生命周期钩子函数之运用

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

  7. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  8. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

  9. vue的生命周期钩子函数

    一.vue生命周期图示 二.钩子函数执行时间 beforeCreate      在创建实例之前,data只声明但没有赋值  在实例初始化之后,数据观测 (data observer) 和 event ...

随机推荐

  1. ubuntu下ganglia3.7.2编译安装

    一.介绍 ganglia主要包括gmond和gmeta 1.gmond用于收集监测数据,可以发送也可以接收在同一个组播或单播通道上的统计信息.gmond有两个角色,一个是发送者,另一个是接收者.当mu ...

  2. 如何将拷贝过来的数据 *.ibd 文件生效

    1.将拷贝的数据文件   "qqq.idb"放在自己的数据库中. 一般存放在  mysql/ data/ databasename 下 2. "qqq.idb" ...

  3. pat1079. Total Sales of Supply Chain (25)

    1079. Total Sales of Supply Chain (25) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...

  4. 用mvc模式,整理前两次的代码并增加登陆注册

    简单的servlet连接mysql数据库 使用mvc的登录注册 commons-dbutils-1.6 mysql-connector-java-5.1.40-bin c3p0-0.9.5.2 mch ...

  5. IE6/7下同级只有一个元素浮动,会换行问题

    .myDiv { background-color: red; width: 200px; height: 200px; padding: 10px; } .div1 { background-col ...

  6. asp.net MVC 4.0 Model元数据回顾——HtmlHelper的ModelMetadata

    模板方法包括Display/DisplayFor.Editor/EditorFor.DisplayForModel/EditForModel提供辅助生成Html的模型元数据信息 public stat ...

  7. 1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛

    1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond         题目描述 Description ...

  8. 零基础逆向工程30_Win32_04_资源文件_消息断点

    1 资源文件,创建对话框 详细步骤: 1.创建一个空的Win32应用程序 2.在VC6中新增资源 File -> New -> Resource Script 创建成功后会新增2个文件:x ...

  9. 创作了一个xml的替代格式

    xml格式: <?xml version="1.0" encoding="GB2312"?> <Relations> <Relat ...

  10. NC57访问报错:java.sql.SQLException: Io 异常: Got minus one from a read call

    一.报错信息 1.  前端登录界面 2.  后台应用日志 报错信息一致为: $$callid= $$thread=[Service Monitor and Runtime Enroment] $$ho ...