elementui transition
ElementUI Transition 组件使用指南
ElementUI 提供了多种过渡动画效果，主要用于组件显示隐藏时的动画效果。以下是常见的使用方法和示例。
基础用法
通过 transition 组件包裹需要动画的元素，设置 name 属性指定动画类型：
<el-transition name="fade">
<div v-show="show">内容区域</div>
</el-transition>内置动画类型
ElementUI 包含以下预设动画效果：
- fade：淡入淡出
- zoom：缩放
- fade-transform：淡入淡出+位移
- slide：滑动
- collapse：折叠展开
<el-collapse-transition>
<div v-show="show">折叠展开效果</div>
</el-collapse-transition>自定义动画
可以通过 CSS 自定义过渡效果：
.custom-enter-active, .custom-leave-active {
transition: all 0.3s;
}
.custom-enter, .custom-leave-to {
opacity: 0;
transform: translateY(10px);
}<transition name="custom">
<div v-show="show">自定义动画</div>
</transition>动画钩子函数
使用 JavaScript 钩子实现更复杂的动画：
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div v-show="show">钩子动画</div>
</transition>methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
duration: 500,
complete: done
})
}
}列表动画
使用 transition-group 实现列表项动画：
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateX(30px);
}注意事项
- 确保动画元素有正确的
v-if或v-show控制 - 列表动画必须设置
key属性 - 复杂动画建议使用 CSS3 属性以获得更好性能
- 移动端注意硬件加速优化
