elementui transition

ElementUI Transition 组件使用指南

ElementUI 提供了 Transition 组件用于实现 Vue.js 的过渡效果，通常与组件显示隐藏状态配合使用。以下是详细使用方法：

基本过渡效果

ElementUI 内置了几种常见过渡效果，通过 name 属性指定：

<el-collapse-transition>
  <div v-show="show">内容区域</div>
</el-collapse-transition>

支持的内置过渡效果包括：

• el-fade-in-linear
• el-fade-in
• el-zoom-in-center
• el-zoom-in-top
• el-zoom-in-bottom

自定义过渡类名

可以通过以下类名自定义过渡效果：

• v-enter: 进入过渡开始状态
• v-enter-active: 进入过渡激活状态
• v-enter-to: 进入过渡结束状态
• v-leave: 离开过渡开始状态
• v-leave-active: 离开过渡激活状态
• v-leave-to: 离开过渡结束状态

示例 CSS 定义：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

JavaScript 钩子函数

Transition 组件提供 JavaScript 钩子实现更复杂的动画效果：

methods: {
  beforeEnter(el) {
    // 进入过渡前回调
  },
  enter(el, done) {
    // 进入过渡回调
    done()
  },
  afterEnter(el) {
    // 进入过渡完成回调
  },
  beforeLeave(el) {
    // 离开过渡前回调
  },
  leave(el, done) {
    // 离开过渡回调
    done()
  },
  afterLeave(el) {
    // 离开过渡完成回调
  }
}

列表过渡

对于 v-for 渲染的列表，可以使用 <transition-group> 组件：

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

与 ElementUI 组件结合

许多 ElementUI 组件内置了过渡效果，例如 Dialog、Message 等，可通过 transition 属性自定义：

<el-dialog :visible.sync="visible" :transition="'el-fade-in'">
  对话框内容
</el-dialog>

性能优化建议

避免在过渡中使用复杂的 CSS 属性，优先使用 transform 和 opacity 等合成层属性。对于大量元素的列表过渡，考虑使用 v-move 类优化移动动画。