钩子函数从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. thinkphp5 join使用注意

    A表有id,name,time等字段, B表有id,type,uid,email,address等字段. A表中的id和B表中的uid对应. Db::table(A表)->alias('a') ...

  2. Sequence( 分块+矩阵快速幂 )

    题目链接 #include<bits/stdc++.h> using namespace std; #define e exp(1) #define pi acos(-1) #define ...

  3. 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法

    解决办法是给menu的default-active绑定route.path形如:<el-menu :default-active="$route.path" ...>每 ...

  4. vuex和localStorage/sessionStorage 区别

    1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地 2.应用场景:vuex用于组件之间的传值,(响应式的),localstorage则主要用于不同页面之间的传值(其 ...

  5. gulp前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

  6. JS精粹知识点和我的解释

    函数若是不return则默认返回undefined const value=()=>{ let a=3; } let value_test; console.log(value(),value_ ...

  7. spring /* 和 /** 的 区别。

    例如 /** 拦截 /index/1   和  /index /* 代表 /index/1 而  /index 则不会被拦截

  8. Flask&&人工智能AI --3

    一.flask中的CBV 对比django中的CBV,我们来看一下flask中的CBV怎么实现? from flask import Flask, render_template, url_for, ...

  9. ZK数据同步

    整个集群完成Learner选举后,Learner向Leader发起注册,然后进入数据同步环节,即Leader将learner上缺失的事务请求同步给Learner 1). 获取Learner状态 根据L ...

  10. Oracle视图,索引,序列

    什么是视图[View] (1)视图是一种虚表 (2)视图建立在已有表的基础上, 视图赖以建立的这些表称为基表(3)向视图提供数据内容的语句为 SELECT 语句,可以将视图理解为存储起来的 SELEC ...