elementui常用知识点总结

1.淡入淡出效果：

  <transition name="el-fade-in-linear">
         <div v-show="show" class="transition-box">.el-fade-in-linear</div>
       </transition>
       <transition name="el-fade-in">
         <div v-show="show" class="transition-box">.el-fade-in</div>
       </transition>

给transition添加：el-fade-in-linear和el-fade-in类

2.Zoom缩放:

  <transition name="el-zoom-in-center">
         <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
       </transition>

       <transition name="el-zoom-in-top">
         <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
       </transition>

       <transition name="el-zoom-in-bottom">
         <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
       </transition>

类:

　　1.el-zoom-in-center

　　2.el-zoom-in-top

　　3.el-zoom-in-bottom

3.展开折叠效果：el-collapse-transition组件

  <el-collapse-transition>
         <div v-show="show3">
           <div class="transition-box">el-collapse-transition</div>
           <div class="transition-box">el-collapse-transition</div>
         </div>
       </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)