elementui常用知识点总结

1.淡入淡出效果：

1  <transition name="el-fade-in-linear">
2         <div v-show="show" class="transition-box">.el-fade-in-lineardiv>
3       transition>
4       <transition name="el-fade-in">
5         <div v-show="show" class="transition-box">.el-fade-indiv>
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-centerdiv>
 3       transition>
 4 
 5       <transition name="el-zoom-in-top">
 6         <div v-show="show2" class="transition-box">.el-zoom-in-topdiv>
 7       transition>
 8 
 9       <transition name="el-zoom-in-bottom">
10         <div v-show="show2" class="transition-box">.el-zoom-in-bottomdiv>
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-transitiondiv>
4           <div class="transition-box">el-collapse-transitiondiv>
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)