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

站长资源 2024/11/25 佚名

55 1538 55

DDR爱好者之家 Design By 杰米

前言

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

过渡动画实现的原理

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

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

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

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

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

4.1

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

4.2

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

###Coding

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

思路

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

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

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,过渡动画

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

详解vue中async-await的使用误区

使用FormData实现上传多个文件

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

更新日志

友情链接