From 500d3f8a12eadf5281a50b67ae7d51038bd0e696 Mon Sep 17 00:00:00 2001
From: catchonme <catchonme@163.com>
Date: Tue, 13 Aug 2019 20:10:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96collapse/tabs=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_collapse.scss | 19 +++++--------------
 scss/components/_tabs.scss     | 10 ++++------
 src/components/Collapse.tsx    | 20 ++++++++++----------
 src/components/Tabs.tsx        |  8 +++-----
 4 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/scss/components/_collapse.scss b/scss/components/_collapse.scss
index fffdb914..19b4caaf 100644
--- a/scss/components/_collapse.scss
+++ b/scss/components/_collapse.scss
@@ -41,20 +41,11 @@
         user-select: none;
     }
 
-    > .collapse {
-        display: none;
-        &.in {
-            display: block;
-            visibility: visible;
+    &-content {
+        transition: height .35s ease;
+        &.in, &.out {
+            height: 0;
+            overflow: hidden;
         }
     }
-
-    > .collapsing {
-        position: relative;
-        height: 0;
-        overflow: hidden;
-        transition-property: height, visibility;
-        transition-duration: .35s;
-        transition-timing-function: ease;
-    }
 }
diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss
index d205fe8d..251cd56c 100644
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@@ -61,15 +61,13 @@
 
     &-pane {
         display: none;
+        opacity: 0;
+        transition: opacity .35s linear;
         &.is-active {
             display: block;
         }
-        &.fade {
-            opacity: 0;
-            transition: opacity .35s linear;
-            &.in {
-                opacity: 1;
-            }
+        &.in {
+            opacity: 1;
         }
     }
 
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 1f2f82f3..25ae005a 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -5,19 +5,17 @@
  */
 
 import React from 'react';
-import cx from 'classnames';
 import css = require('dom-helpers/style');
 import {ClassNamesFn, themeable} from '../theme';
-import Transition, { EXITED, ENTERED, ENTERING, EXITING } from 'react-transition-group/Transition';
+import Transition, { EXITED, ENTERING, EXITING } from 'react-transition-group/Transition';
 import { autobind } from '../utils/helper';
 
 const collapseStyles: {
     [propName: string]: string;
 } = {
-    [EXITED]: 'collapse',
-    [EXITING]: 'collapsing',
-    [ENTERING]: 'collapsing',
-    [ENTERED]: 'collapse in',
+    [EXITED]: 'out',
+    [EXITING]: 'out',
+    [ENTERING]: 'in'
 };
 
 export interface CollapseProps {
@@ -76,6 +74,7 @@ export class Collapse extends React.Component<CollapseProps, any> {
         const {
             show,
             children,
+            classnames: cx,
             mountOnEnter,
             unmountOnExit
         } = this.props;
@@ -92,16 +91,17 @@ export class Collapse extends React.Component<CollapseProps, any> {
                 onExit={this.handleExit}
                 onExiting={this.handleExiting}
             >
-                {(status:string, innerProps:any) => {
+                {(status:string) => {
                     if (status === ENTERING) {
                         this.contentDom.offsetWidth;
                     }
                     return React.cloneElement(children as any, {
-                        ...innerProps,
+                        ...(children as React.ReactElement).props,
                         ref: this.contentRef,
                         className: cx(
-                            collapseStyles[status],
-                            innerProps.className
+                            'Collapse-content',
+                            (children as React.ReactElement).props.className,
+                            collapseStyles[status]
                         )
                     })}
                 }
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 4850d13a..04826005 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -6,16 +6,14 @@
 
 import React from 'react';
 import { Schema } from '../types';
-import Transition, {ENTERED, ENTERING, EXITED, EXITING} from 'react-transition-group/Transition';
+import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
 import { ClassNamesFn, themeable } from '../theme';
 
 const transitionStyles: {
     [propName: string]: string;
 } = {
-    [EXITED]: 'fade',
-    [EXITING]: 'fade',
-    [ENTERING]: 'fade in',
-    [ENTERED]: 'fade in'
+    [ENTERING]: 'in',
+    [ENTERED]: 'in'
 };
 
 export interface TabProps extends Schema {