内置过渡动画

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

fade 淡入淡出

提供 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>
  38. ¶ zoom 缩放
  39. .el-zoom-in-center
  40. .el-zoom-in-top
  41. .el-zoom-in-bottom
  42. 提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。
  44. <template>
  45.   <div>
  46.     <el-button @click="show2 = !show2">Click Me</el-button>
  48.     <div style="display: flex; margin-top: 20px; height: 100px;">
  49.       <transition name="el-zoom-in-center">
  50.         <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
  51.       </transition>
  53.       <transition name="el-zoom-in-top">
  54.         <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
  55.       </transition>
  57.       <transition name="el-zoom-in-bottom">
  58.         <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
  59.       </transition>
  60.     </div>
  61.   </div>
  62. </template>
  64. <script>
  65.     export default {
  66.     data: () => ({
  67.       show2: true
  68.     })
  69.   }
  70. </script>
  72. <style>
  73.   .transition-box {
  74.     margin-bottom: 10px;
  75.     width: 200px;
  76.     height: 100px;
  77.     border-radius: 4px;
  78.     background-color: #409EFF;
  79.     text-align: center;
  80.     color: #fff;
  81.     padding: 40px 20px;
  82.     box-sizing: border-box;
  83.     margin-right: 20px;
  84.   }
  85. </style>

collapse 展开折叠

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

  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)