• 内置过渡动画
    • fade 淡入淡出
    • zoom 缩放
    • collapse 展开折叠
    • 按需引入

    内置过渡动画

    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)