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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
jquery实现弹出层效果实例
May 19 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
Javascript之Math对象详解
Jun 07 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
JSONP 的原理、理解 与 实例分析
May 16 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python select.select模块通信全过程解析
2017/09/20 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
毕业生求职推荐信
2013/11/04 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
民事起诉书范本
2015/05/19 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书