Vue內置過渡動畫-常用的類名

1.fade 淡入淡出

<transition name="el-fade-in-linear">
   <div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
   <div v-show="show" class="transition-box">.el-fade-in</div>
</transition>

常用：el-fade-in-linear  和   el-fade-in 類

 

2.zoom 縮放

<transition name="el-zoom-in-center">
   <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
</transition>
 
<transition name="el-zoom-in-top">
   <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
</transition>
 
<transition name="el-zoom-in-bottom">
   <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
</transition>

 

常用：1. el-zoom-in-center        2. el-zoom-in-top         3. el-zoom-in-bottom

 

3.collapse展開折疊

<template> <div> <el-button @click="show3 = !show3">Click Me</el-button> <div style="margin-top: 20px; height: 200px;"> <el-collapse-transition> <div v-show="show3"> <div class="transition-box">el-collapse-transition</div> <div class="transition-box">el-collapse-transition</div> </div> </el-collapse-transition> </div> </div> </template> <script> export default { data: () => ({ show3: true }) } </script> <style> .transition-box { margin-bottom: 10px; width: 200px; height: 100px; border-radius: 4px; background-color: #409EFF; text-align: center; color: #fff; padding: 40px 20px; box-sizing: border-box; margin-right: 20px; } </style>

常用：el-collapse-transition組件

 

使用引入方法：

// fade/zoom 等
import 'element-ui/lib/theme-chalk/base.css';
// collapse 展開折疊
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'

Vue.component(CollapseTransition.name, CollapseTransition)