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的过渡动画效果。


相关文章
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
718 143
|
11月前
|
自然语言处理 前端开发 JavaScript
用 通义灵码 一键生成“水波纹按钮”,连 CSS 动画都不用自己写了!
通义灵码是一款智能编程辅助工具,它可以根据自然语言指令自动生成高质量的代码。例如,只需输入“生成一个按钮,点击时带水波纹动画,模拟 Material Ripple 效果”,它就能生成具备完整交互逻辑、CSS 动画和良好性能的按钮组件。不仅如此,它还支持拓展功能,如长按触发提示、添加图标等,并能自动优化样式适配不同场景。通过通义灵码,开发者可以大幅提升效率,专注于创意实现,而不必纠结于繁琐的代码细节。
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
532 3
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
407 56
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
310 34
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
1006 2
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
297 22
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
314 31
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
574 17