vue动画使用javascript钩子函数
2024-08-27 16:17:56
钩子函数从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;
- }
- }
- })
最新文章
- 最适合和最不适合新手使用的几款 Linux 发行版
- 安装php扩展
- 如何使用DDMS Heap查看Android应用内存情况
- SAP采购订单屏幕增强
- short-path problem (Spfa) 分类: ACM TYPE 2014-09-02 00:30 103人阅读 评论(0) 收藏
- 【转】apue《UNIX环境高级编程第三版》第一章答案详解
- POJ动态规划题目列表
- caffe源码阅读(1)-数据流Blob
- jQuery设置checkbox全选(区别jQuery版本)
- 从零开始学习jquery (一)
- 关于iOS9中的App Transport Security相关说明及适配(转)
- C#异步的世界【下】
- JAVA 笔记 ClassLoader.getResourceAsStream() 与 Class.getResourceAsStream()的区别
- Django1.11搭建一个简易上传显示图片的后台
- 解决Windows和Linux使用npm打包js和css文件不同的问题
- 防止用户重发发生ajax请求
- CDH 元数据库升级
- future封装了callable,thread封装future。
- Intellij Idea免费激活方法
- statistical thinking in Python EDA
热门文章
- STP-19-Port-Channel发现和配置
- 分别使用http,express,koa请求第三方接口
- IE8浏览器总是无响应或卡死崩溃怎么办
- excel单元格内容合并
- LeetCode 046 Permutations 全排列
- 【开源我写的富文本】打造全网最劲富文本技术选型之经典OOP仍是魅力硬核。
- Angular8稳定版修改概述
- CentOS7.4搭建GitLab
- java 从List<;Integer>; 中随机获取6个数
- elasticsearch报错:None of the configured nodes are available: []