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)

?

轉載于:https://www.cnblogs.com/yangguoe/p/9978067.html

總結

以上是生活随笔為你收集整理的elementui常用知识点总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。