elementui常用知识点总结

yangguoe 2021-10-12 原文

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)