vue中的css动画(过渡动画)使用步骤和原理

简介: vue中的css动画(过渡动画)使用步骤和原理

1.vue的css动画的使用步骤是什么?


以元素过渡隐藏和显示为例,css使用步骤下图

1dc618a0ed9580ce8bfa6facb208c08f.png5d4c6812c8535adbb050f4ddf2e1bce8.png


这样就可显示动画了。


2.vue的css动画原理是什么?


答: 当一个元素被transition包裹之后,vue会自动的分析元素的css样式,然后构建一个动画的流程。


流程分2块,一块是元素显示的流程,一块是元素隐藏的流程。


显示流程:


46a9d80a6e05e4e3b19d57a0ee70bcdf.png


显示动画执行的瞬间,会在第一帧增加2个属性的名字: fade-enter和fade-enter-active。


当第一帧执行过后,vue会把之前添加的fade-enter这个class去掉,然后再增加一个fade-enter-to这样一个class的名字,接着动画继续执行。


执行的结束的这一瞬间,vue会吧fade-enter-active和fade-enter-to这2个class属性移除除掉。


那么我们通过自定义vue的这几个css样式,就可以实现我们想要的效果了。


代码演示如下:

1dc618a0ed9580ce8bfa6facb208c08f.png


这样,div在显示的时候就有过渡的效果啦。


注意:


所有的样式都以fade开头是因为:

5d4c6812c8535adbb050f4ddf2e1bce8.png


隐藏流程


46a9d80a6e05e4e3b19d57a0ee70bcdf.png


隐藏动画执行的瞬间,会在第一帧增加2个属性的名字: fade-leave和fade-leave-active。


当第一帧执行过后,vue会把之前添加的fade-leave这个class去掉,然后再增加一个fade-leave-to这样一个class的名字,接着动画继续执行。


执行的结束的这一瞬间,vue会吧fade-leave-active和fade-leave-to这2个class属性移除除掉。


代码示例如下:

66ba272a0bfc97be54a5fa679e3d5482.png

显示流程和隐藏流程合起来写就是如下的代码:

1dc618a0ed9580ce8bfa6facb208c08f.png


另外,vue的css动画效果,也叫vue的过渡动画效果。


相关文章
|
9天前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
26 2
|
2天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
9天前
|
JavaScript API 开发者
Vue中双向数据绑定是如何实现的?底层原理简介
Vue中双向数据绑定是如何实现的?底层原理简介
10 4
|
9天前
|
JavaScript 安全 前端开发
vue怎么处理跨域,原理?
vue怎么处理跨域,原理?
17 2
|
9天前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中,通过创新技巧,可以使用HTML和CSS模拟云朵漂浮和草地动画效果,提升用户体验。背景实现采用线性渐变动画,使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素,结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造,配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
20 1
纯CSS画浮动卡通蓝天白云草坪动画效果
|
12天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的《数据库系统原理》课程平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的《数据库系统原理》课程平台附带文章和源代码设计说明文档ppt
16 1
|
13天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
24 1
|
14天前
|
JavaScript 开发者
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
|
16天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
24天前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
27 0