内置过渡动画

Element Plus 内应用在部分组件的过渡动画，你也可以直接使用。 在使用之前，请阅读 官方的过渡组件文档 内置过渡动画 - 图1 。

Fade 淡入淡出

提供 el-fade-in-linear 和 el-fade-in 两种效果。

内置过渡动画 - 图2

  1. <template>
  2.   <div>
  3.     <el-button @click="show = !show">Click Me</el-button>
  5.     <div style="display: flex; margin-top: 20px; height: 100px">
  6.       <transition name="el-fade-in-linear">
  7.         <div v-show="show" class="transition-box">.el-fade-in-linear</div>
  8.       </transition>
  9.       <transition name="el-fade-in">
  10.         <div v-show="show" class="transition-box">.el-fade-in</div>
  11.       </transition>
  12.     </div>
  13.   </div>
  14. </template>
  16. <script lang="ts" setup>
  17. import { ref } from 'vue'
  19. const show = ref(true)
  20. </script>
  22. <style>
  23. .transition-box {
  24.   margin-bottom: 10px;
  25.   width: 200px;
  26.   height: 100px;
  27.   border-radius: 4px;
  28.   background-color: #409eff;
  29.   text-align: center;
  30.   color: #fff;
  31.   padding: 40px 20px;
  32.   box-sizing: border-box;
  33.   margin-right: 20px;
  34. }
  35. </style>

Zoom 缩放

提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。

内置过渡动画 - 图3

  1. <template>
  2.   <div>
  3.     <el-button @click="show = !show">Click Me</el-button>
  5.     <div style="display: flex; margin-top: 20px; height: 100px">
  6.       <transition name="el-zoom-in-center">
  7.         <div v-show="show" class="transition-box">.el-zoom-in-center</div>
  8.       </transition>
  10.       <transition name="el-zoom-in-top">
  11.         <div v-show="show" class="transition-box">.el-zoom-in-top</div>
  12.       </transition>
  14.       <transition name="el-zoom-in-bottom">
  15.         <div v-show="show" class="transition-box">.el-zoom-in-bottom</div>
  16.       </transition>
  17.     </div>
  18.   </div>
  19. </template>
  21. <script lang="ts" setup>
  22. import { ref } from 'vue'
  24. const show = ref(true)
  25. </script>
  27. <style>
  28. .transition-box {
  29.   margin-bottom: 10px;
  30.   width: 200px;
  31.   height: 100px;
  32.   border-radius: 4px;
  33.   background-color: #409eff;
  34.   text-align: center;
  35.   color: #fff;
  36.   padding: 40px 20px;
  37.   box-sizing: border-box;
  38.   margin-right: 20px;
  39. }
  40. </style>

Collapse 折叠面板

使用 el-collapse-transition 组件实现折叠展开效果。

内置过渡动画 - 图4

  1. <template>
  2.   <div>
  3.     <el-button @click="show = !show">Click Me</el-button>
  5.     <div style="margin-top: 20px; height: 200px">
  6.       <el-collapse-transition>
  7.         <div v-show="show">
  8.           <div class="transition-box">el-collapse-transition</div>
  9.           <div class="transition-box">el-collapse-transition</div>
  10.         </div>
  11.       </el-collapse-transition>
  12.     </div>
  13.   </div>
  14. </template>
  16. <script lang="ts" setup>
  17. import { ref } from 'vue'
  19. const show = ref(true)
  20. </script>
  22. <style>
  23. .transition-box {
  24.   margin-bottom: 10px;
  25.   width: 200px;
  26.   height: 100px;
  27.   border-radius: 4px;
  28.   background-color: #409eff;
  29.   text-align: center;
  30.   color: #fff;
  31.   padding: 40px 20px;
  32.   box-sizing: border-box;
  33.   margin-right: 20px;
  34. }
  35. </style>

按需导入

  1. // collapse
  2. import { ElCollapseTransition } from 'element-plus'
  3. // fade/zoom
  4. import 'element-plus/lib/theme-chalk/base.css'
  5. import App from './App.vue'
  7. const app = createApp(App)
  8. app.component(ElCollapseTransition.name, ElCollapseTransition)