mirror of https://github.com/ElemeFE/element
Add transition doc and CollapseTransition component
qingwei.li
杨奕
parent
bc64164193
commit
fff57cdfcc
|
|
@ -11,9 +11,11 @@ var MAIN_TEMPLATE = `/* Automatic generated by './build/bin/build-entry.js' */
|
|||
|
||||
{{include}}
|
||||
import locale from 'element-ui/src/locale';
|
||||
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
|
||||
const components = [
|
||||
{{install}}
|
||||
{{install}},
|
||||
CollapseTransition
|
||||
];
|
||||
|
||||
const install = function(Vue, opts = {}) {
|
||||
|
|
@ -47,6 +49,7 @@ module.exports = {
|
|||
locale: locale.use,
|
||||
i18n: locale.i18n,
|
||||
install,
|
||||
CollapseTransition,
|
||||
Loading,
|
||||
{{list}}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
|||
| disabled | whether Popover is disabled | boolean | — | false |
|
||||
| value(v-model) | whether popover is visible | Boolean | — | false |
|
||||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | fade-in-linear |
|
||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
||||
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | custom class name for popover | string | — | — |
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ Display multiple lines of text and set their format.
|
|||
|
||||
In addition to basic usages, there are some attributes that allow you to customize your own:
|
||||
|
||||
`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is `fade-in-linear`.
|
||||
`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
|
||||
|
||||
`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
|
||||
|
||||
|
|
@ -206,7 +206,7 @@ Disabled form elements are not supported in tooltip, see more information at [MD
|
|||
| value(v-model) | visibility of Tooltip | boolean | — | false |
|
||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||
| offset | offset of the Tooltip | number | — | 0 |
|
||||
| transition | animation name | string | — | `fade-in-linear` |
|
||||
| transition | animation name | string | — | el-fade-in-linear |
|
||||
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| open-delay | delay of appearance, in millisecond | number | — | 0 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
## Built-in transition
|
||||
|
||||
If you want, you can use Element built-in transition directly. Of course you need to know [vue#transition](https://vuejs.org/v2/api/#transition).
|
||||
|
||||
### fade
|
||||
|
||||
:::demo You can use `el-fade-in-linear` and `el-fade-in`.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show = !show">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### zoom
|
||||
|
||||
:::demo You can use `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom`.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show2 = !show2">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show2: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### collapse
|
||||
|
||||
`el-collapse-transition` is a special component that implement collapse transtion.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show3 = !show3">Click Me</el-button>
|
||||
|
||||
<div style="margin-top: 20px; height: 200px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
margin-right: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data: () => ({
|
||||
show: true,
|
||||
show2: true,
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -208,7 +208,7 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
|
|||
| value(v-model) | 状态是否可见 | Boolean | — | false |
|
||||
| disabled | Tooltip 是否可用 | Boolean | — | false |
|
||||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | `fade-in-linear` |
|
||||
| transition | 定义渐变动画 | String | — | el-fade-in-linear |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body', gpuAcceleration: false } |
|
||||
| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
## 内置过渡动画
|
||||
|
||||
Element 内应用在部分组件的过渡动画，你也可以直接使用。具体用法参考 [transition 组件](https://cn.vuejs.org/v2/api/#transition)。
|
||||
|
||||
### fade 淡入淡出
|
||||
|
||||
:::demo 提供 `el-fade-in-linear` 和 `el-fade-in` 两种效果。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show = !show">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### zoom 缩放
|
||||
|
||||
:::demo 提供 `el-zoom-in-center`，`el-zoom-in-top` 和 `el-zoom-in-bottom` 三种效果。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show2 = !show2">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show2: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### collapse 展开折叠
|
||||
|
||||
使用 `el-collapse-transition` 组件实现折叠展开效果。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show3 = !show3">Click Me</el-button>
|
||||
|
||||
<div style="margin-top: 20px; height: 200px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
border-radius: 4px;
|
||||
background-color: #20A0FF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
margin-right: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data: () => ({
|
||||
show: true,
|
||||
show2: true,
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -18,6 +18,10 @@
|
|||
{
|
||||
"path": "/custom-theme",
|
||||
"name": "自定义主题"
|
||||
},
|
||||
{
|
||||
"path": "/transition",
|
||||
"name": "内置过渡动画"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -248,6 +252,10 @@
|
|||
{
|
||||
"path": "/custom-theme",
|
||||
"name": "Custom Theme"
|
||||
},
|
||||
{
|
||||
"path": "/transition",
|
||||
"name": "Built-in transition"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,18 +4,17 @@
|
|||
<i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
|
||||
<slot name="title">{{title}}</slot>
|
||||
</div>
|
||||
<collapse-transition>
|
||||
<el-collapse-transition>
|
||||
<div class="el-collapse-item__wrap" v-show="isActive">
|
||||
<div class="el-collapse-item__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</collapse-transition>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Emitter from 'element-ui/src/mixins/emitter';
|
||||
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
|
||||
export default {
|
||||
name: 'ElCollapseItem',
|
||||
|
|
@ -24,10 +23,6 @@
|
|||
|
||||
mixins: [Emitter],
|
||||
|
||||
components: {
|
||||
CollapseTransition
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
contentWrapStyle: {
|
||||
|
|
|
|||
|
|
@ -20,15 +20,14 @@
|
|||
<ul class="el-menu" v-show="opened"><slot></slot></ul>
|
||||
</transition>
|
||||
</template>
|
||||
<collapse-transition v-else>
|
||||
<el-collapse-transition v-else>
|
||||
<ul class="el-menu" v-show="opened"><slot></slot></ul>
|
||||
</collapse-transition>
|
||||
</el-collapse-transition>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import menuMixin from './menu-mixin';
|
||||
import Emitter from 'element-ui/src/mixins/emitter';
|
||||
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
|
||||
export default {
|
||||
name: 'ElSubmenu',
|
||||
|
|
@ -37,10 +36,6 @@
|
|||
|
||||
mixins: [menuMixin, Emitter],
|
||||
|
||||
components: {
|
||||
CollapseTransition
|
||||
},
|
||||
|
||||
props: {
|
||||
index: {
|
||||
type: String,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@charset "UTF-8";
|
||||
@import './var.css';
|
||||
|
||||
/* DEPRECATED */
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
transition: var(--fade-linear-transition);
|
||||
|
|
@ -11,6 +12,16 @@
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.el-fade-in-linear-enter-active,
|
||||
.el-fade-in-linear-leave-active {
|
||||
transition: var(--fade-linear-transition);
|
||||
}
|
||||
.el-fade-in-linear-enter,
|
||||
.el-fade-in-linear-leave,
|
||||
.el-fade-in-linear-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.el-fade-in-enter-active,
|
||||
.el-fade-in-leave-active {
|
||||
transition: all .3s cubic-bezier(.55,0,.1,1);
|
||||
|
|
@ -59,11 +70,3 @@
|
|||
.collapse-transition {
|
||||
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
|
||||
}
|
||||
|
||||
.list-enter-active, .list-leave-active {
|
||||
transition: all 1s;
|
||||
}
|
||||
.list-enter, .list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
},
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'fade-in-linear'
|
||||
default: 'el-fade-in-linear'
|
||||
},
|
||||
popperOptions: {
|
||||
default() {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</span>
|
||||
<node-content :node="node"></node-content>
|
||||
</div>
|
||||
<collapse-transition>
|
||||
<el-collapse-transition>
|
||||
<div
|
||||
class="el-tree-node__children"
|
||||
v-show="expanded">
|
||||
|
|
@ -39,12 +39,11 @@
|
|||
@node-expand="handleChildNodeExpand">
|
||||
</el-tree-node>
|
||||
</div>
|
||||
</collapse-transition>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/jsx">
|
||||
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
import ElCheckbox from 'element-ui/packages/checkbox';
|
||||
import emitter from 'element-ui/src/mixins/emitter';
|
||||
|
||||
|
|
@ -67,7 +66,6 @@
|
|||
|
||||
components: {
|
||||
ElCheckbox,
|
||||
CollapseTransition,
|
||||
NodeContent: {
|
||||
props: {
|
||||
node: {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ import CollapseItem from '../packages/collapse-item/index.js';
|
|||
import Cascader from '../packages/cascader/index.js';
|
||||
import ColorPicker from '../packages/color-picker/index.js';
|
||||
import locale from 'element-ui/src/locale';
|
||||
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
|
||||
const components = [
|
||||
Pagination,
|
||||
|
|
@ -122,7 +123,8 @@ const components = [
|
|||
Collapse,
|
||||
CollapseItem,
|
||||
Cascader,
|
||||
ColorPicker
|
||||
ColorPicker,
|
||||
CollapseTransition
|
||||
];
|
||||
|
||||
const install = function(Vue, opts = {}) {
|
||||
|
|
@ -156,6 +158,7 @@ module.exports = {
|
|||
locale: locale.use,
|
||||
i18n: locale.i18n,
|
||||
install,
|
||||
CollapseTransition,
|
||||
Loading,
|
||||
Pagination,
|
||||
Dialog,
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ class Transition {
|
|||
}
|
||||
|
||||
export default {
|
||||
name: 'ElCollapseTransition',
|
||||
functional: true,
|
||||
render(h, { children }) {
|
||||
const data = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue