vue动画使用javascript钩子函数
钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期
- <transition
- v-on:before-enter="beforeEnter"
- v-on:enter="enter"
- v-on:after-enter="afterEnter"
- v-on:enter-cancelled="enterCancelled"
- v-on:before-leave="beforeLeave"
- v-on:leave="leave"
- v-on:after-leave="afterLeave"
- v-on:leave-cancelled="leaveCancelled"
- >
- <!-- ... -->
- </transition>
实现购物车案例
- <input type="button" value="toggle" @click="flag=!flag"/>
- //使用duration来统一设置入场和离场时候动画
- //还可以分别设置 :duration="{enter:200,leave:400}"
- <transition
- @before-enter="beforeEnter"
- @:enter="enter"
- @:after-enter="afterEnter">
- <div class="ball" v-show="flag"></div>
- </transition>
- var vm=new Vue({
- el: '#app',
- data:{
- flag:false
- },
- methods:{
- //el表示执行动画的那个dom元素,是个元素的dom对象
- //大家可以认为el是通过docoment.getElementById()获取后的dom对象
- beforeEnter(el){
- //beforeEnter表示动画入场之前,此时动画尚未开始,可以在beforeEnter中设置动画开始之前的样式
- el.style.transform="translate(0,0)";
- },
- enter(el,done){
- //动画开始之后的样式
- //这句话没有实际作用,但如果不写动画效果出不来
- //可以认为 el.offsetWidth会强制动画刷新
- el.offsetWidth;
- el.style.transform="translate(150px,450px)";
- el.style.transition="all in ease";
- //写了这个才会调用afterEnter函数,done是一个函数的引用
- done();
- },
- afterEnter(el){
- //动画完成之后调用
- this.flag=!this.flag;
- }
- }
- })
vue动画使用javascript钩子函数的更多相关文章
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- Vue源码后记-钩子函数
vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...
- Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
- vue的生命周期钩子函数
一.vue生命周期图示 二.钩子函数执行时间 beforeCreate 在创建实例之前,data只声明但没有赋值 在实例初始化之后,数据观测 (data observer) 和 event ...
随机推荐
- thinkphp5 join使用注意
A表有id,name,time等字段, B表有id,type,uid,email,address等字段. A表中的id和B表中的uid对应. Db::table(A表)->alias('a') ...
- Sequence( 分块+矩阵快速幂 )
题目链接 #include<bits/stdc++.h> using namespace std; #define e exp(1) #define pi acos(-1) #define ...
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
解决办法是给menu的default-active绑定route.path形如:<el-menu :default-active="$route.path" ...>每 ...
- vuex和localStorage/sessionStorage 区别
1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地 2.应用场景:vuex用于组件之间的传值,(响应式的),localstorage则主要用于不同页面之间的传值(其 ...
- gulp前端自动化构建工具
博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...
- JS精粹知识点和我的解释
函数若是不return则默认返回undefined const value=()=>{ let a=3; } let value_test; console.log(value(),value_ ...
- spring /* 和 /** 的 区别。
例如 /** 拦截 /index/1 和 /index /* 代表 /index/1 而 /index 则不会被拦截
- Flask&&人工智能AI --3
一.flask中的CBV 对比django中的CBV,我们来看一下flask中的CBV怎么实现? from flask import Flask, render_template, url_for, ...
- ZK数据同步
整个集群完成Learner选举后,Learner向Leader发起注册,然后进入数据同步环节,即Leader将learner上缺失的事务请求同步给Learner 1). 获取Learner状态 根据L ...
- Oracle视图,索引,序列
什么是视图[View] (1)视图是一种虚表 (2)视图建立在已有表的基础上, 视图赖以建立的这些表称为基表(3)向视图提供数据内容的语句为 SELECT 语句,可以将视图理解为存储起来的 SELEC ...