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

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


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

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

这样就可显示动画了。

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

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

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

显示流程:

  • 显示动画执行的瞬间,会在第一帧增加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样式,就可以实现我们想要的效果了。

代码演示如下:

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

注意:

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

隐藏流程

  • 隐藏动画执行的瞬间,会在第一帧增加2个属性的名字: fade-leave和fade-leave-active。
  • 当第一帧执行过后,vue会把之前添加的fade-leave这个class去掉,然后再增加一个fade-leave-to这样一个class的名字,接着动画继续执行。
  • 执行的结束的这一瞬间,vue会吧fade-leave-active和fade-leave-to这2个class属性移除除掉。

代码示例如下:

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

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

相关文章
|
3月前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
162 73
|
2月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
139 56
|
2月前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
103 2
|
4月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
92 34
|
3月前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
4月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
76 22
|
6月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
112 31
|
5月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
116 6
|
6月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
177 17
|
6月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
150 7