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)