elementui常用知识点总结

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常用知识点总结相关推荐

Webpack 常用知识点总结
Webpack 常用知识点总结 webpack 是一个模块打包器.webpack 的主要目标是将 javaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transf ...
javaScript常用知识点有哪些
javaScript常用知识点有哪些一.总结一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...
ES6常用知识点概述
前言国庆假期已过一半,来篇干货压压惊. ES6,并不是一个新鲜的东西,ES7.ES8已经赶脚了.但是,东西不在于新,而在于总结.每个学前端的人,身边也必定有本阮老师的<ES6标准入门>或 ...
list python 访问键值对_基础|Python常用知识点汇总(中)
字符串字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串.1.创建字符串 str1 = 'Hello World!' str2 = "Hello W ...
matplotlib一些常用知识点的整理，
本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 强烈推荐ipython 无论你工作在什么项目上,IPython都是值得推荐的.利用ipython --pylab,可以进入Py ...
oracle 常用知识点整理
转 : oracle 常用知识点原文链接:http://blog.csdn.net/weijiaxiaobao/article/details/51323573 Oracle 是一个庞大的系统,里 ...
php常用技术与thinkphp5,thinkPHP5框架路由常用知识点汇总
本文实例讲述了thinkPHP5框架路由常用知识点.分享给大家供大家参考,具体如下: 一.路由的模式普通模式(默认pathinfo,不解析路由) 'url_route_on' => false ...
【C++】-- C++11基础常用知识点（下）
上篇: [C++]-- C++11基础常用知识点(上)_川入的博客-CSDN博客目录新的类功能默认成员函数可变参数模板可变参数可变参数模板 empalce lambda表达式 C++98中 ...
敏捷ACP 常用关键词整理敏捷ACP 常用知识点整理
敏捷ACP 常用关键词整理敏捷ACP 常用知识点整理一.MoSCoW 1.MoSCoW : 读作"莫斯科",适用于故事优先级的排序,首次出现在 3-13敏捷产品实践:产品待 ...

elementui常用知识点总结

elementui常用知识点总结相关推荐

最新文章

热门文章