1.淡入淡出效果：

1  <transition name="el-fade-in-linear">
2         <div v-show="show" class="transition-box">.el-fade-in-linear</div>
3       </transition>
4       <transition name="el-fade-in">
5         <div v-show="show" class="transition-box">.el-fade-in</div>
 

6       </transition>

給transition新增：el-fade-in-linear和el-fade-in類

2.Zoom縮放:

 1  <transition name="el-zoom-in-center">
 2         <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
 3       </transition>
 4 
 5       <transition name="el-zoom-in-top"
 
>
 6         <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
 7       </transition>
 8 
 9       <transition name="el-zoom-in-bottom">
10         <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
11       </transition>

類:

　　1.el-zoom-in-center

　　2.el-zoom-in-top

　　3.el-zoom-in-bottom

3.展開摺疊效果：el-collapse-transition元件

1  <el-collapse-transition>
2         <div v-show="show3">
3           <div class="transition-box">el-collapse-transition</div>
4           <div class="transition-box">el-collapse-transition</div>
5         </div>
6       </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)