Skip to content

E
Element
Commit fff57cdf authored by qingwei.li's avatar qingwei.li Committed by 杨奕
Browse files
Options

Add transition doc and CollapseTransition component

parent bc641641
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 33 deletions
build/bin/build-entry.js
View file @ fff57cdf
......@@ -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}}
};
......
examples/docs/en-US/popover.md
View file @ fff57cdf
......@@ -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 | — | — |
......
examples/docs/en-US/tooltip.md
View file @ fff57cdf
......@@ -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 |
......
examples/docs/en-US/transition.md 0 → 100644
View file @ fff57cdf
## 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>
examples/docs/zh-CN/tooltip.md
View file @ fff57cdf
......@@ -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 |
......
examples/docs/zh-CN/transition.md 0 → 100644
View file @ fff57cdf
## 内置过渡动画
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>
examples/nav.config.json
View file @ fff57cdf
......@@ -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"
}
]
},
......
packages/collapse/src/collapse-item.vue
View file @ fff57cdf
......@@ -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: {
......
packages/menu/src/submenu.vue
View file @ fff57cdf
......@@ -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,
......
packages/theme-default/src/common/transition.css
View file @ fff57cdf
@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);
}
packages/tooltip/src/main.js
View file @ fff57cdf
......@@ -26,7 +26,7 @@ export default {
},
transition: {
type: String,
default: 'fade-in-linear'
default: 'el-fade-in-linear'
},
popperOptions: {
default() {
......
packages/tree/src/tree-node.vue
View file @ fff57cdf
......@@ -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: {
......
src/index.js
View file @ fff57cdf
......@@ -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,
......
src/transitions/collapse-transition.js
View file @ fff57cdf
......@@ -65,6 +65,7 @@ class Transition {
}
export default {
name: 'ElCollapseTransition',
functional: true,
render(h, { children }) {
const data = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment