内置过渡动画

Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 transition 组件文档 。

fade 淡入淡出

内置过渡动画 - 图1

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

  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>
  17.     export default {
  18.     data: () => ({
  19.       show: true
  20.     })
  21.   }
  22. </script>
  24. <style>
  25.   .transition-box {
  26.     margin-bottom: 10px;
  27.     width: 200px;
  28.     height: 100px;
  29.     border-radius: 4px;
  30.     background-color: #409EFF;
  31.     text-align: center;
  32.     color: #fff;
  33.     padding: 40px 20px;
  34.     box-sizing: border-box;
  35.     margin-right: 20px;
  36.   }
  37. </style>

zoom 缩放

内置过渡动画 - 图2

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

  1. <template>
  2.   <div>
  3.     <el-button @click="show2 = !show2">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="show2" class="transition-box">.el-zoom-in-center</div>
  8.       </transition>
  10.       <transition name="el-zoom-in-top">
  11.         <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
  12.       </transition>
  14.       <transition name="el-zoom-in-bottom">
  15.         <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
  16.       </transition>
  17.     </div>
  18.   </div>
  19. </template>
  21. <script>
  22.     export default {
  23.     data: () => ({
  24.       show2: true
  25.     })
  26.   }
  27. </script>
  29. <style>
  30.   .transition-box {
  31.     margin-bottom: 10px;
  32.     width: 200px;
  33.     height: 100px;
  34.     border-radius: 4px;
  35.     background-color: #409EFF;
  36.     text-align: center;
  37.     color: #fff;
  38.     padding: 40px 20px;
  39.     box-sizing: border-box;
  40.     margin-right: 20px;
  41.   }
  42. </style>

collapse 展开折叠

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

内置过渡动画 - 图3

  1. <template>
  2.   <div>
  3.     <el-button @click="show3 = !show3">Click Me</el-button>
  5.     <div style="margin-top: 20px; height: 200px;">
  6.       <el-collapse-transition>
  7.         <div v-show="show3">
  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>
  17.     export default {
  18.     data: () => ({
  19.       show3: true
  20.     })
  21.   }
  22. </script>
  24. <style>
  25.   .transition-box {
  26.     margin-bottom: 10px;
  27.     width: 200px;
  28.     height: 100px;
  29.     border-radius: 4px;
  30.     background-color: #409EFF;
  31.     text-align: center;
  32.     color: #fff;
  33.     padding: 40px 20px;
  34.     box-sizing: border-box;
  35.     margin-right: 20px;
  36.   }
  37. </style>

按需引入

  1. // fade/zoom 等
  2. import 'element-ui/lib/theme-chalk/base.css';
  3. // collapse 展开折叠
  4. import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
  5. import Vue from 'vue'
  7. Vue.component(CollapseTransition.name, CollapseTransition)