Element Plus 内置过渡动画完全指南Fade、Zoom 与 Collapse Transition 的原理与实战【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusElement Plus 在官方文档的 内置过渡动画指南 中提供了一套开箱即用的过渡效果——淡入Fade、缩放Zoom与折叠Collapse它们直接内嵌于主题样式与组件体系中无需额外引入动画库即可使用。本文将以该指南为骨架结合packages/theme-chalk的 SCSS 实现与collapse-transition组件的 Vue 源码从怎么用到为什么这样实现逐层拆解读完你不仅能快速接入这些动效还能掌握自定义与按需引入的正确姿势。前置知识先理解 Vue 的TransitionElement Plus 的内置过渡本质上是一组预先命名好的 CSS 过渡类名。在使用它们之前请先阅读 Vue 官方的 Transition 内置组件文档——它的name属性会决定进入/离开时挂载到元素上的 CSS 类名前缀如el-fade-in-enter-active这是理解 Element Plus 过渡命名的关键。所有内置过渡均基于 Vue 的transition组件 主题 CSS 的约定式命名组合而成你不需要手写任何 CSS 类名。Fade两种淡入淡出效果Element Plus 提供两种淡入效果el-fade-in-linear与el-fade-in。前者是匀速线性的透明度过渡后者则配合--el-transition-duration时长使用自定义贝塞尔曲线观感更柔和。完整示例见 fade.vue核心代码如下template div el-button clickshow !showClick Me/el-button div classfade-container transition nameel-fade-in-linear div v-showshow classtransition-box.el-fade-in-linear/div /transition transition nameel-fade-in div v-showshow classtransition-box.el-fade-in/div /transition /div /div /template script langts setup import { ref } from vue const show ref(true) /script注意这里使用了v-show配合transitionv-show只切换display保留元素在 DOM 中从而让 CSS 过渡能够完整地驱动透明度变化。Fade 的底层 CSS 实现在 common/transition.scss 中两种淡入效果的差异一目了然.#{$namespace}-fade-in-linear-enter-active, .#{$namespace}-fade-in-linear-leave-active { transition: getCssVar(transition-fade, linear); } .#{$namespace}-fade-in-linear-enter-from, .#{$namespace}-fade-in-linear-leave-to { opacity: 0; } .#{$namespace}-fade-in-enter-active, .#{$namespace}-fade-in-leave-active { transition: all getCssVar(transition-duration) cubic-bezier(0.55, 0, 0.1, 1); } .#{$namespace}-fade-in-enter-from, .#{$namespace}-fade-in-leave-active { opacity: 0; }el-fade-in-linear过渡属性为opacity时长为--el-transition-duration-fast0.2s缓动函数为linear对应 var.scss 中预设的fade-linear。el-fade-in过渡属性为all时长为--el-transition-duration0.3s缓动函数为cubic-bezier(0.55, 0, 0.1, 1)。Zoom四种方向的缩放进入el-zoom-in-left、el-zoom-in-center、el-zoom-in-top、el-zoom-in-bottom分别从四个方向/锚点缩放进入常用于下拉菜单、气泡等浮层的展开动画。完整示例见 zoom.vuetemplate div el-button clickshow !showClick Me/el-button div classtransition-container transition nameel-zoom-in-left div v-showshow classtransition-box.el-zoom-in-left/div /transition transition nameel-zoom-in-center div v-showshow classtransition-box.el-zoom-in-center/div /transition transition nameel-zoom-in-top div v-showshow classtransition-box.el-zoom-in-top/div /transition transition nameel-zoom-in-bottom div v-showshow classtransition-box.el-zoom-in-bottom/div /transition /div /div /template script langts setup import { ref } from vue const show ref(true) /scriptZoom 的底层 CSS 实现在 common/transition.scss 中四种缩放的区别在于transform-origin缩放锚点与缩放比例过渡名称transform-originenter-from 初始状态el-zoom-in-center默认中心opacity: 0; transform: scaleX(0)el-zoom-in-topcenter toppopover 朝上时切换为center bottomopacity: 0; transform: scaleY(0)el-zoom-in-bottomcenter bottomopacity: 0; transform: scaleY(0)el-zoom-in-lefttop leftopacity: 0; transform: scale(0.45, 0.45)以el-zoom-in-top为例它还通过[data-popper-placement^top]属性选择器根据 Popper 浮层的实际挂载方向自动调整transform-origin这正是它在el-tooltip、el-popover、el-dropdown等组件中作为浮层过渡的原因。从源码结构看这类缩放过渡被设计为同时兼容组件内嵌过渡与独立使用两种场景。Collapse使用el-collapse-transition组件折叠效果与 Fade/Zoom 不同——它不是一组 CSS 类名而是一个封装好的 Vue 组件el-collapse-transition。因为折叠动画需要测量元素真实高度scrollHeight并动态计算max-height纯 CSS 无法优雅完成必须借助 JavaScript 钩子。完整示例见 collapse.vuetemplate div el-button clickshow !showClick Me/el-button div stylemargin-top: 20px; height: 210px el-collapse-transition div v-showshow div classtransition-boxel-collapse-transition/div div classtransition-box mt-[10px]el-collapse-transition/div /div /el-collapse-transition /div /div /template script langts setup import { ref } from vue const show ref(true) /script用法要点组件内部是一个transition :namens.b() v-onon直接透传默认插槽中的内容name会被解析为el-collapse-transition由useNamespace生成。切换显隐时请使用v-show示例中为v-showshow与 Vue Transition 的进入/离开钩子配合工作。外层需要为内容预留足够的容器高度示例中为height: 210px否则展开时可能出现布局跳动。Collapse 组件的工作原理在 collapse-transition.vue 中组件利用六个 Vue Transition 钩子实现高度从 0 到实际高度的平滑过渡beforeEnter把当前padding-top/bottom存进el.dataset将maxHeight、padding 全部置 0为展开做准备。enter在requestAnimationFrame回调中读取el.scrollHeight写入maxHeight恢复原 padding并将overflow设为hidden触发高度过渡。afterEnter清除内联maxHeight恢复原overflow避免影响后续布局。beforeLeave先记录原始内联样式再把maxHeight设为当前scrollHeight、overflow: hidden为收起动画定住初始高度。leave将maxHeight、padding 过渡到 0完成收起。afterLeave/*Cancelled通过reset()清理所有内联样式与 dataset 残留。其中maxHeight的动画时长与缓动由 common/transition.scss 中的el-collapse-transition-enter-active/leave-active提供.#{$namespace}-collapse-transition-leave-active, .#{$namespace}-collapse-transition-enter-active { transition: getCssVar(transition-duration) max-height ease-in-out, getCssVar(transition-duration) padding-top ease-in-out, getCssVar(transition-duration) padding-bottom ease-in-out; }正是这种maxHeightscrollHeight测量 内联样式保存/恢复的组合让el-collapse-transition在 Element Plus 的el-collapse、el-menu等组件中被广泛复用。按需引入On-demand import按需引入时Fade/Zoom 与 Collapse 的引入方式不同// collapse import { ElCollapseTransition } from element-plus // fade/zoom import element-plus/theme-chalk/base.css import App from ./App.vue const app createApp(App) app.component(ElCollapseTransition.name, ElCollapseTransition)Collapse 组件从element-plus主包导出通过app.component(ElCollapseTransition.name, ElCollapseTransition)全局注册。从 index.ts 可以看到它经过了withInstall包装因此也支持app.use(ElCollapseTransition)的插件式注册。Fade / Zoom 过渡类它们只是 CSS 类名不依赖任何 JS 组件因此只需引入element-plus/theme-chalk/base.css基础样式其中包含 transition.scss 的过渡定义即可生效。进阶过渡相关 CSS 变量一览所有内置过渡的时长与缓动都抽取为 CSS 变量你可以在自己的样式中覆盖它们以全局定制动画节奏。变量定义位于 var.scssCSS 变量默认值含义--el-transition-duration0.3s默认过渡时长--el-transition-duration-fast0.2s快速过渡时长用于fade-linear等--el-transition-function-ease-in-out-beziercubic-bezier(0.645, 0.045, 0.355, 1)常用缓动曲线--el-transition-function-fast-beziercubic-bezier(0.23, 1, 0.32, 1)快速缓动曲线用于md-fade缩放过渡--el-transition-fade-linearopacity 0.2s linearfade-linear 完整过渡简写在 var.scss 中这些变量通过set-component-css-var(transition-duration / transition-function / transition)注册到:root上。若想全局放缓动画只需在入口样式中覆盖--el-transition-duration: 0.4s即可Element Plus 内置过渡与大量组件的动效会同步生效——这也是 Element Plus 将过渡节奏变量化的设计意图。总结Fade 与 Zoom是纯 CSS 过渡通过在transition nameel-*上使用约定类名即可直接复用无需额外组件。Collapse需要测量实际高度的折叠动画应使用el-collapse-transition组件它内部已封装完整的maxHeight计算与样式清理逻辑。按需引入时Collapse 走组件注册路径Fade/Zoom 只需引入theme-chalk/base.css。时长与缓动均沉淀为--el-transition-*CSS 变量可通过主题定制统一调整。如果你想继续深入可以分别查看 transition.scss 过渡样式、collapse-transition 组件源码 以及三个官方示例 fade.vue、zoom.vue、collapse.vue动手调整show的状态切换与 CSS 变量观察动画行为的变化。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Element Plus 内置过渡动画完全指南：Fade、Zoom 与 Collapse Transition 的原理与实战
Element Plus 内置过渡动画完全指南Fade、Zoom 与 Collapse Transition 的原理与实战【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusElement Plus 在官方文档的 内置过渡动画指南 中提供了一套开箱即用的过渡效果——淡入Fade、缩放Zoom与折叠Collapse它们直接内嵌于主题样式与组件体系中无需额外引入动画库即可使用。本文将以该指南为骨架结合packages/theme-chalk的 SCSS 实现与collapse-transition组件的 Vue 源码从怎么用到为什么这样实现逐层拆解读完你不仅能快速接入这些动效还能掌握自定义与按需引入的正确姿势。前置知识先理解 Vue 的TransitionElement Plus 的内置过渡本质上是一组预先命名好的 CSS 过渡类名。在使用它们之前请先阅读 Vue 官方的 Transition 内置组件文档——它的name属性会决定进入/离开时挂载到元素上的 CSS 类名前缀如el-fade-in-enter-active这是理解 Element Plus 过渡命名的关键。所有内置过渡均基于 Vue 的transition组件 主题 CSS 的约定式命名组合而成你不需要手写任何 CSS 类名。Fade两种淡入淡出效果Element Plus 提供两种淡入效果el-fade-in-linear与el-fade-in。前者是匀速线性的透明度过渡后者则配合--el-transition-duration时长使用自定义贝塞尔曲线观感更柔和。完整示例见 fade.vue核心代码如下template div el-button clickshow !showClick Me/el-button div classfade-container transition nameel-fade-in-linear div v-showshow classtransition-box.el-fade-in-linear/div /transition transition nameel-fade-in div v-showshow classtransition-box.el-fade-in/div /transition /div /div /template script langts setup import { ref } from vue const show ref(true) /script注意这里使用了v-show配合transitionv-show只切换display保留元素在 DOM 中从而让 CSS 过渡能够完整地驱动透明度变化。Fade 的底层 CSS 实现在 common/transition.scss 中两种淡入效果的差异一目了然.#{$namespace}-fade-in-linear-enter-active, .#{$namespace}-fade-in-linear-leave-active { transition: getCssVar(transition-fade, linear); } .#{$namespace}-fade-in-linear-enter-from, .#{$namespace}-fade-in-linear-leave-to { opacity: 0; } .#{$namespace}-fade-in-enter-active, .#{$namespace}-fade-in-leave-active { transition: all getCssVar(transition-duration) cubic-bezier(0.55, 0, 0.1, 1); } .#{$namespace}-fade-in-enter-from, .#{$namespace}-fade-in-leave-active { opacity: 0; }el-fade-in-linear过渡属性为opacity时长为--el-transition-duration-fast0.2s缓动函数为linear对应 var.scss 中预设的fade-linear。el-fade-in过渡属性为all时长为--el-transition-duration0.3s缓动函数为cubic-bezier(0.55, 0, 0.1, 1)。Zoom四种方向的缩放进入el-zoom-in-left、el-zoom-in-center、el-zoom-in-top、el-zoom-in-bottom分别从四个方向/锚点缩放进入常用于下拉菜单、气泡等浮层的展开动画。完整示例见 zoom.vuetemplate div el-button clickshow !showClick Me/el-button div classtransition-container transition nameel-zoom-in-left div v-showshow classtransition-box.el-zoom-in-left/div /transition transition nameel-zoom-in-center div v-showshow classtransition-box.el-zoom-in-center/div /transition transition nameel-zoom-in-top div v-showshow classtransition-box.el-zoom-in-top/div /transition transition nameel-zoom-in-bottom div v-showshow classtransition-box.el-zoom-in-bottom/div /transition /div /div /template script langts setup import { ref } from vue const show ref(true) /scriptZoom 的底层 CSS 实现在 common/transition.scss 中四种缩放的区别在于transform-origin缩放锚点与缩放比例过渡名称transform-originenter-from 初始状态el-zoom-in-center默认中心opacity: 0; transform: scaleX(0)el-zoom-in-topcenter toppopover 朝上时切换为center bottomopacity: 0; transform: scaleY(0)el-zoom-in-bottomcenter bottomopacity: 0; transform: scaleY(0)el-zoom-in-lefttop leftopacity: 0; transform: scale(0.45, 0.45)以el-zoom-in-top为例它还通过[data-popper-placement^top]属性选择器根据 Popper 浮层的实际挂载方向自动调整transform-origin这正是它在el-tooltip、el-popover、el-dropdown等组件中作为浮层过渡的原因。从源码结构看这类缩放过渡被设计为同时兼容组件内嵌过渡与独立使用两种场景。Collapse使用el-collapse-transition组件折叠效果与 Fade/Zoom 不同——它不是一组 CSS 类名而是一个封装好的 Vue 组件el-collapse-transition。因为折叠动画需要测量元素真实高度scrollHeight并动态计算max-height纯 CSS 无法优雅完成必须借助 JavaScript 钩子。完整示例见 collapse.vuetemplate div el-button clickshow !showClick Me/el-button div stylemargin-top: 20px; height: 210px el-collapse-transition div v-showshow div classtransition-boxel-collapse-transition/div div classtransition-box mt-[10px]el-collapse-transition/div /div /el-collapse-transition /div /div /template script langts setup import { ref } from vue const show ref(true) /script用法要点组件内部是一个transition :namens.b() v-onon直接透传默认插槽中的内容name会被解析为el-collapse-transition由useNamespace生成。切换显隐时请使用v-show示例中为v-showshow与 Vue Transition 的进入/离开钩子配合工作。外层需要为内容预留足够的容器高度示例中为height: 210px否则展开时可能出现布局跳动。Collapse 组件的工作原理在 collapse-transition.vue 中组件利用六个 Vue Transition 钩子实现高度从 0 到实际高度的平滑过渡beforeEnter把当前padding-top/bottom存进el.dataset将maxHeight、padding 全部置 0为展开做准备。enter在requestAnimationFrame回调中读取el.scrollHeight写入maxHeight恢复原 padding并将overflow设为hidden触发高度过渡。afterEnter清除内联maxHeight恢复原overflow避免影响后续布局。beforeLeave先记录原始内联样式再把maxHeight设为当前scrollHeight、overflow: hidden为收起动画定住初始高度。leave将maxHeight、padding 过渡到 0完成收起。afterLeave/*Cancelled通过reset()清理所有内联样式与 dataset 残留。其中maxHeight的动画时长与缓动由 common/transition.scss 中的el-collapse-transition-enter-active/leave-active提供.#{$namespace}-collapse-transition-leave-active, .#{$namespace}-collapse-transition-enter-active { transition: getCssVar(transition-duration) max-height ease-in-out, getCssVar(transition-duration) padding-top ease-in-out, getCssVar(transition-duration) padding-bottom ease-in-out; }正是这种maxHeightscrollHeight测量 内联样式保存/恢复的组合让el-collapse-transition在 Element Plus 的el-collapse、el-menu等组件中被广泛复用。按需引入On-demand import按需引入时Fade/Zoom 与 Collapse 的引入方式不同// collapse import { ElCollapseTransition } from element-plus // fade/zoom import element-plus/theme-chalk/base.css import App from ./App.vue const app createApp(App) app.component(ElCollapseTransition.name, ElCollapseTransition)Collapse 组件从element-plus主包导出通过app.component(ElCollapseTransition.name, ElCollapseTransition)全局注册。从 index.ts 可以看到它经过了withInstall包装因此也支持app.use(ElCollapseTransition)的插件式注册。Fade / Zoom 过渡类它们只是 CSS 类名不依赖任何 JS 组件因此只需引入element-plus/theme-chalk/base.css基础样式其中包含 transition.scss 的过渡定义即可生效。进阶过渡相关 CSS 变量一览所有内置过渡的时长与缓动都抽取为 CSS 变量你可以在自己的样式中覆盖它们以全局定制动画节奏。变量定义位于 var.scssCSS 变量默认值含义--el-transition-duration0.3s默认过渡时长--el-transition-duration-fast0.2s快速过渡时长用于fade-linear等--el-transition-function-ease-in-out-beziercubic-bezier(0.645, 0.045, 0.355, 1)常用缓动曲线--el-transition-function-fast-beziercubic-bezier(0.23, 1, 0.32, 1)快速缓动曲线用于md-fade缩放过渡--el-transition-fade-linearopacity 0.2s linearfade-linear 完整过渡简写在 var.scss 中这些变量通过set-component-css-var(transition-duration / transition-function / transition)注册到:root上。若想全局放缓动画只需在入口样式中覆盖--el-transition-duration: 0.4s即可Element Plus 内置过渡与大量组件的动效会同步生效——这也是 Element Plus 将过渡节奏变量化的设计意图。总结Fade 与 Zoom是纯 CSS 过渡通过在transition nameel-*上使用约定类名即可直接复用无需额外组件。Collapse需要测量实际高度的折叠动画应使用el-collapse-transition组件它内部已封装完整的maxHeight计算与样式清理逻辑。按需引入时Collapse 走组件注册路径Fade/Zoom 只需引入theme-chalk/base.css。时长与缓动均沉淀为--el-transition-*CSS 变量可通过主题定制统一调整。如果你想继续深入可以分别查看 transition.scss 过渡样式、collapse-transition 组件源码 以及三个官方示例 fade.vue、zoom.vue、collapse.vue动手调整show的状态切换与 CSS 变量观察动画行为的变化。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考