钩子函数从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. jdk的卸载

    问题描述: win10环境安装了jdk1.7&jdk1.8&jdk1.9 jdk1.9安装后,设置jdk1.9安装目录为JAVA_HOME.后来JAVA_HOME切换jdk1.8环境变 ...

  2. github:当你想要使用VSCODE开心提交代码时,出现Git:git@github.com:Permission denied(publickey)解决方案

    当你想要使用VSCODE开心提交代码时,出现Git:git@github.com:Permission denied(publickey)弹框 图片: 原因:电脑公钥(publickey)未添加至gi ...

  3. redis常用

    redis的key和string类型value限制均为512MB

  4. KEYCODE列表

    电话键 键名 描述 键值   KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME 按键Home 3 KEYCODE_MENU 菜单键 82 KE ...

  5. Murano 网址一览

    [Murano_Meeting] http://eavesdrop.openstack.org/#Murano_Meeting [Murano_Meeting_Agenda] https://wiki ...

  6. form中onsubmit的使用

    form 中的onsubmit在点submit按钮时被触发,如果return false;则结果不会被提交到action中去(也就是提交动作不会发生),如果不返回或者返回true,则执行提交动作.(& ...

  7. CentOS7.4搭建GitLab

    1.查看服务器环境 uname -a 2.下载安装包 [1]找到相应的最新版本的下载路径 网址:https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/e ...

  8. MVC学习6 学习使用Code First Migrations功能 把Model的更新同步到DB中

     参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-new-field-to-th ...

  9. Windows下使用beego遇到的问题

    一.解决:cc1.exe: sorry, unimplemented: 64-bit mode not compiled in: 参考链接:http://blog.csdn.net/mecho/art ...

  10. 《C#高效编程》读书笔记04-使用Conditional特性而不是#if条件编译

    #if/#endif语句常用来基于同一份源代码生成不同的编译结果,其中最常见的就是debug版和release版.但是这在实际应用中并不是非常友好,因为它们容易被滥用,其代码也难以理解或调试. C#为 ...