add submenu transition (#2298)

build/config.js

@@ -6,6 +6,7 @@ var saladConfig = require('../packages/theme-default/salad.config.json');
 
 var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
 var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));
+var transitionList = fs.readdirSync(path.resolve(__dirname, '../src/transitions'));
 var externals = {};
 
 Object.keys(Components).forEach(function(key) {
@@ -21,6 +22,10 @@ mixinsList.forEach(function(file) {
   file = path.basename(file, '.js');
   externals[`element-ui/src/mixins/${file}`] = `element-ui/lib/mixins/${file}`;
 });
+transitionList.forEach(function(file) {
+  file = path.basename(file, '.js');
+  externals[`element-ui/src/transitions/${file}`] = `element-ui/lib/transitions/${file}`;
+});
 
 externals = [Object.assign({
   vue: 'vue'

packages/menu/src/submenu.vue

@@ -15,14 +15,20 @@
       }">
       </i>
     </div>
-    <transition :name="rootMenu.mode === 'horizontal' ? 'el-zoom-in-top' : ''">
+    <template v-if="rootMenu.mode === 'horizontal'">
+      <transition name="el-zoom-in-top">
         <ul class="el-menu" v-show="opened"><slot></slot></ul>
       </transition>
+    </template>
+    <collapse-transition v-else>
+      <ul class="el-menu" v-show="opened"><slot></slot></ul>
+    </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';
 
   module.exports = {
     name: 'ElSubmenu',
@@ -31,6 +37,10 @@
 
     mixins: [menuMixin, Emitter],
 
+    components: {
+      CollapseTransition
+    },
+
     props: {
       index: {
         type: String,

packages/tabs/src/tab-pane.vue

 <template>
-  <div class="el-tab-pane">
-    <div class="el-tab-pane__content" v-show="active">
+  <div class="el-tab-pane" v-show="active">
     <slot></slot>
   </div>
-  </div>
 </template>
 <script>
   module.exports = {

packages/tree/src/tree-node.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script type="text/jsx">
-  import CollapseTransition from './transition';
+  import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
   import ElCheckbox from 'element-ui/packages/checkbox';
 
   export default {

packages/tree/src/transition.js → src/transitions/collapse-transition.js

@@ -3,6 +3,7 @@ class Transition {
     if (!el.dataset) el.dataset = {};
     el.dataset.oldPaddingTop = el.style.paddingTop;
     el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldDisplay = el.style.display;
     el.style.height = '0';
     el.style.paddingTop = 0;
     el.style.paddingBottom = 0;
@@ -55,7 +56,8 @@ class Transition {
   }
 
   afterLeave(el) {
-    el.style.display = el.style.height = '';
+    el.style.display = el.dataset.oldDisplay;
+    el.style.height = '';
     el.style.overflow = el.dataset.oldOverflow;
     el.style.paddingTop = el.dataset.oldPaddingTop;
     el.style.paddingBottom = el.dataset.oldPaddingBottom;