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

相关文章
|
6天前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
|
7天前
|
前端开发 开发者 异构计算
CSS进阶-CSS动画关键帧
【6月更文挑战第15天】CSS的`@keyframes`创建细腻动画,定义样式变化阶段以增强网页互动性。通过`animation`属性应用动画,如`fadeIn`示例。常见问题包括动画结束状态、卡顿和浏览器兼容性,解决办法涉及优化关键帧、使用硬件加速和添加前缀。进阶技巧包括多步骤动画和控制播放状态。例如,背景色渐变动画展示了颜色随时间变化的效果。学习和实践关键帧动画,提升Web开发技能。
|
5天前
|
JavaScript 前端开发 API
什么是响应式❓Vue2/Vue3中响应式的原理
什么是响应式❓Vue2/Vue3中响应式的原理
17 2
|
5天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
13 2
|
11天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
18天前
|
JavaScript API 开发者
Vue中双向数据绑定是如何实现的?底层原理简介
Vue中双向数据绑定是如何实现的?底层原理简介
13 4
|
18天前
|
JavaScript 安全 前端开发
vue怎么处理跨域,原理?
vue怎么处理跨域,原理?
19 2
|
2天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
7天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
63 7
使用 Vue CLI 脚手架生成 Vue 项目
|
4天前
|
JavaScript