优化collapse/tabs动画

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;
-    }
 }

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;
         }
     }
 

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]
                         )
                     })}
                 }

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 {