80Vue - 过渡的-CSS-类名

简介: 80Vue - 过渡的-CSS-类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

  1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
  2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。
  3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
  4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。

对于这些在 enter/leave 过渡中切换的类名,v-是这些类名的前缀。使用 <name="my-transition>"可以重置前缀,比如v-enter替换为my-transition-enter

目录
相关文章
|
7月前
|
JSON 前端开发 JavaScript
CSS模块postcss-modules,在jsx中实现vue里的scoped
CSS模块postcss-modules,在jsx中实现vue里的scoped
|
3月前
|
前端开发
如何处理 <style scoped> 中 CSS 类名的冲突问题?
如何处理 <style scoped> 中 CSS 类名的冲突问题?
|
3月前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
72 0
|
4月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
74 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
5月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
207 2
|
5月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
95 1
|
5月前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
303 0
|
5月前
|
前端开发 JavaScript
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
110 0
|
5月前
|
JavaScript 内存技术
Vue动画——使用最新版Animate.css教程
Vue动画——使用最新版Animate.css教程
349 0
|
7月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。