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 ...
随机推荐
- jdk的卸载
问题描述: win10环境安装了jdk1.7&jdk1.8&jdk1.9 jdk1.9安装后,设置jdk1.9安装目录为JAVA_HOME.后来JAVA_HOME切换jdk1.8环境变 ...
- github:当你想要使用VSCODE开心提交代码时,出现Git:git@github.com:Permission denied(publickey)解决方案
当你想要使用VSCODE开心提交代码时,出现Git:git@github.com:Permission denied(publickey)弹框 图片: 原因:电脑公钥(publickey)未添加至gi ...
- redis常用
redis的key和string类型value限制均为512MB
- KEYCODE列表
电话键 键名 描述 键值 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME 按键Home 3 KEYCODE_MENU 菜单键 82 KE ...
- Murano 网址一览
[Murano_Meeting] http://eavesdrop.openstack.org/#Murano_Meeting [Murano_Meeting_Agenda] https://wiki ...
- form中onsubmit的使用
form 中的onsubmit在点submit按钮时被触发,如果return false;则结果不会被提交到action中去(也就是提交动作不会发生),如果不返回或者返回true,则执行提交动作.(& ...
- CentOS7.4搭建GitLab
1.查看服务器环境 uname -a 2.下载安装包 [1]找到相应的最新版本的下载路径 网址:https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/e ...
- 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 ...
- Windows下使用beego遇到的问题
一.解决:cc1.exe: sorry, unimplemented: 64-bit mode not compiled in: 参考链接:http://blog.csdn.net/mecho/art ...
- 《C#高效编程》读书笔记04-使用Conditional特性而不是#if条件编译
#if/#endif语句常用来基于同一份源代码生成不同的编译结果,其中最常见的就是debug版和release版.但是这在实际应用中并不是非常友好,因为它们容易被滥用,其代码也难以理解或调试. C#为 ...