简单谈谈vue的过渡动画(推荐)


Posted in Javascript onOctober 11, 2017

在vue中,实现过渡动画一般是下面这样:

<transition name="fade">
 <div></div>
</transition>

用一个transition对元素或者组件进行封装.

在过渡的时候,会有 4 个(CSS)类名在 enter/leave 的过渡中切换。

1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。

3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

4.v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。

上面是官方文档的原话,但是这4个类名如何运用呢?下面看个例子

<transition name="fold">
 <div v-show="show" class="example"></div>
</transition>

css:
.example {
 width: 100px;
 height: 100px;
 transform: translate3d(0, -100px, 0);
}
.fold-enter-active, .fold-leave-active {
 transition: all .5s;
}
.fold-enter, .fold-leave-active {
 transform: translate3d(0, 0, 0);
}

当show = true时:

这里的fold-enter,是在元素显示的一瞬间被加入,然后瞬间被移除,在上面的例子中,example这个块状元素本来因为有了transform: translate3d(0, -100px, 0)这个样式,所以被上移了100px,但是因为fold-enter,所以将example这个块状元素移到了原位,但是fold-enter因为瞬间就被移除掉了,所以这时候的元素的样式又变成了transform: translate3d(0, -100px, 0),但是这时候fold-enter-active这个样式就生效了,因为设置了transition: all .5s,所以元素会在0.5s的时间内上移100px,在过渡动画结束之后,fold-enter-active这个类马上被移除.

当show = false时:

example不会马上消失,这个时候fold-leave-active这个类就起作用了,example这时的位置是在-100px,fold-leave-active定义的是过渡的结束状态:transform: translate3d(0, 0, 0);,但是同时又设置了transition: all .5s,所以这时元素会在0.5s的时间内下移100px.之后fold-leave-active被移除.

官网的一张图

简单谈谈vue的过渡动画(推荐)

另外,还可以在动画中调用js钩子函数:

<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>

不过用的不多,可以在methods中定义这些方法.

以上这篇简单谈谈vue的过渡动画(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 #Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
AngularJS中下拉框的高级用法示例
Oct 11 #Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 #Javascript
AngularJS中下拉框的基本用法示例
Oct 11 #Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 #Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
日期 时间js控件
2009/05/07 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
利用Python破解验证码实例详解
2016/12/08 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Python logging模块handlers用法详解
2020/08/14 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
师德承诺书
2015/01/20 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
Flask response响应的具体使用
2021/07/15 Python