Add transition doc and CollapseTransition component

build/bin/build-entry.js

@@ -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

@@ -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

@@ -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

+## 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

@@ -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

+## 内置过渡动画
+
+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

@@ -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

@@ -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

@@ -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

 @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

@@ -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

@@ -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

@@ -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

@@ -65,6 +65,7 @@ class Transition {
 }
 
 export default {
+  name: 'ElCollapseTransition',
   functional: true,
   render(h, { children }) {
     const data = {