Vue中的基础过渡动画及实现原理解析


Posted in Javascript onDecember 04, 2018

前言

在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画、keyframes动画以及实现的原理

过渡动画实现的原理

1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层  <transition>标签

2.当元素/组件被<transition>标签包裹了以后 那么Vue会自动的为我们构建一个动画流程 具体的流程会在下文提到 因此先记住这句话就行啦 也就是说 如果你在<style>标签中添加了一些样式的话Vue会自动的在某个时间节点给元素或者组件添加、删除对应的样式

3.上面提到了当元素/组件被<transition>标签包裹的时候Vue会自动的构建动画流程 也就是自动的在某个时间节点添加/删除对应的CSS类名 Vue其实提供了6个对应的类名 这里借助官网的一张图来罗列

Vue中的基础过渡动画及实现原理解析 

光这样看官网文字的解释可能感觉还不够清楚 所以这里我们借助一张图来帮助我们更好的理解这些CSS类名分别在什么时候被添加、移除

4 各个类名添加删除的时间

4.1

Vue中的基础过渡动画及实现原理解析 

我们假设黑色横线作为动画的整个流程 红点为动画开始的瞬间 那么 当我们用  <transition>标签包裹了元素/组件的时候 Vue会在动画即将开始还没开始的时候添加两个CSS类名 分别是v-enter/v-enter-to当动画开始的瞬间v-enter被自动的移除 而v-enter-active这个class会一直存在于整个动画过程中 直到动画结束的时候跟v-enter/v-enter-to一起被自动删除

4.2

Vue中的基础过渡动画及实现原理解析 

我们同样还是假设黑色横线作为动画的整个流程 那么在这里可以看到v-leave会在动画还没有开始的时候被添加上去 当动画开始的瞬间v-leave被移除 v-leave-to被添加 而v-leave-active会一直存在于整个动画过程中 直到动画结束的时候跟v-leave/v-leave-to一起被移除

###Coding

当有了这些理论知识以后 就可以动手写一个非常简单的demo了 假设现在有一个需求 页面上某个元素 通过按钮来控制隐藏和显示 同时这个隐藏和显示的过程中 有一个透明度由0-1的渐变过程

思路

通过v-if控制元素的显示 同时利用<transition>标签包裹元素实现透明度变化的过渡过程

1.先搭建基本页面以及通过按钮点击事件控制元素的隐藏与显示

Vue中的基础过渡动画及实现原理解析 

2.既然已知vue会在元素被<transition>包裹以后自动添加类名 那就在<style>标签里写上对应的样式效果

<style>
 .v-enter,
 .v-leave-to {
  opacity: 0;
 }
 .v-enter-active,
 .v-leave-active {
  transition: opacity 3s;
 }
 </style>

这里需要理解的一点在于 上文已经提到 当进场动画触发的时候 v-enter会立马被移除 因此在样式里把opacity写成0 也就是说 原本页面上没有显示但是即将要显示这个元素的时候 opacity会变为1 而v-enter-active全程都在监听transition:opacity的变化 如果变化了 就让效果在3秒内结束 反之退场动画也是同样的 v-leave-to会在动画执行的时候被添加 这个时候 v-leave-active感知到了transition:opacity的变化 会在3秒内做出对应的改变 最终代码运行结果如下

Vue中的基础过渡动画及实现原理解析

总结

以上所述是小编给大家介绍的Vue中的基础过渡动画及实现原理解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
vue中template的三种写法示例
Oct 21 Javascript
javascript实现前端分页功能
Nov 26 Javascript
使用FormData实现上传多个文件
Dec 04 #Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 #Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 #Javascript
vue实现的双向数据绑定操作示例
Dec 04 #Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
vue实现的组件兄弟间通信功能示例
Dec 04 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
Python自定义主从分布式架构实例分析
2016/09/19 Python
python实现微信自动回复功能
2018/04/11 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
三维科技面试题
2013/07/27 面试题
技术人员面试提纲
2013/11/28 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
升学宴学生致辞
2015/09/29 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书