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

    内置过渡动画

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

    fade 淡入淡出

    内置过渡动画 - 图1

    提供 el-fade-in-linearel-fade-in 两种效果。

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

    zoom 缩放

    内置过渡动画 - 图2

    提供 el-zoom-in-centerel-zoom-in-topel-zoom-in-bottom 三种效果。

    1. <template>
    2. <div>
    3. <el-button @click="show2 = !show2">Click Me</el-button>
    4. <div style="display: flex; margin-top: 20px; height: 100px;">
    5. <transition name="el-zoom-in-center">
    6. <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
    7. </transition>
    8. <transition name="el-zoom-in-top">
    9. <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
    10. </transition>
    11. <transition name="el-zoom-in-bottom">
    12. <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
    13. </transition>
    14. </div>
    15. </div>
    16. </template>
    17. <script>
    18. export default {
    19. data: () => ({
    20. show2: true
    21. })
    22. }
    23. </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>

    collapse 展开折叠

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

    内置过渡动画 - 图3

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