collapse-transition: fix strange transition behaviour in safari (#2525)

* collapse-transition: fix strange transition behaviour in safari

* 为你库兼容ie9

* move collapse-transition from tree to src/common

packages/theme-default/src/collapse.css

@@ -26,7 +26,6 @@
     @e wrap {
       will-change: height;
       background-color: var(--collapse-content-fill);
-      transition: height .3s cubic-bezier(0.215, 0.61, 0.355, 1);
       overflow: hidden;
       box-sizing: border-box;
       border-bottom: 1px solid var(--collapse-border-color);
@@ -49,4 +48,4 @@
       margin-bottom: -1px;
     }
   }
-}
+}

packages/theme-default/src/common/transition.css

@@ -55,3 +55,7 @@
   opacity: 0;
   transform: scaleY(0);
 }
+
+.collapse-transition {
+    transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+}

packages/theme-default/src/tree.css

@@ -101,7 +101,3 @@
 .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background-color: color(var(--color-primary) tint(92%));
 }
-
-.collapse-transition {
-    transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
-}

src/transitions/collapse-transition.js

@@ -1,5 +1,8 @@
+import { addClass, removeClass } from 'element-ui/src/utils/dom';
+
 class Transition {
   beforeEnter(el) {
+    addClass(el, 'collapse-transition');
     if (!el.dataset) el.dataset = {};
 
     el.dataset.oldPaddingTop = el.style.paddingTop;
@@ -26,6 +29,8 @@ class Transition {
   }
 
   afterEnter(el) {
+    // for safari: remove class then reset height is necessary
+    removeClass(el, 'collapse-transition');
     el.style.height = '';
     el.style.overflow = el.dataset.oldOverflow;
   }
@@ -42,6 +47,8 @@ class Transition {
 
   leave(el) {
     if (el.scrollHeight !== 0) {
+      // for safari: add class after set height, or it will jump to zero height suddenly, weired
+      addClass(el, 'collapse-transition');
       el.style.height = 0;
       el.style.paddingTop = 0;
       el.style.paddingBottom = 0;
@@ -49,6 +56,7 @@ class Transition {
   }
 
   afterLeave(el) {
+    removeClass(el, 'collapse-transition');
     el.style.height = '';
     el.style.overflow = el.dataset.oldOverflow;
     el.style.paddingTop = el.dataset.oldPaddingTop;
@@ -63,11 +71,6 @@ export default {
       on: new Transition()
     };
 
-    children = children.map(item => {
-      item.data.class = ['collapse-transition'];
-      return item;
-    });
-
     return h('transition', data, children);
   }
 };