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不同页面传值的改进版
Sep 30 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
详解Webpack4多页应用打包方案
Jul 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
SONY SRF-40W电路分析
2021/03/02 无线电
php 运行效率总结(提示程序速度)
2009/11/26 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP多维数组排序array详解
2017/11/21 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
shiro授权的实现原理
2017/09/21 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
教师辞职报告范文
2014/01/20 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
销售员态度差检讨书
2014/10/26 职场文书
工程项目合作意向书
2015/05/08 职场文书
费用申请报告范文
2015/05/15 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL