Merge pull request #154 from catchonme/master

替换掉bootstrap中tabs/collapse的动画

scss/components/_collapse.scss

@@ -40,4 +40,12 @@
     &--collapsable &-header {
         user-select: none;
     }
+
+    &-content {
+        transition: height .35s ease;
+        &.in, &.out {
+            height: 0;
+            overflow: hidden;
+        }
+    }
 }

scss/components/_tabs.scss

@@ -61,9 +61,14 @@
 
     &-pane {
         display: none;
+        opacity: 0;
+        transition: opacity .35s linear;
         &.is-active {
             display: block;
         }
+        &.in {
+            opacity: 1;
+        }
     }
 
     &--line {

src/components/Collapse.tsx

@@ -5,22 +5,20 @@
  */
 
 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 show',
+    [EXITED]: 'out',
+    [EXITING]: 'out',
+    [ENTERING]: 'in'
 };
 
-export interface CollapseProps  {
+export interface CollapseProps {
     show?: boolean,
     mountOnEnter?: boolean,
     unmountOnExit?: boolean,
@@ -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,7 +6,7 @@
 
 import React from 'react';
 import { Schema } from '../types';
-import Transition, { ENTERED, ENTERING } from 'react-transition-group/Transition';
+import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
 import { ClassNamesFn, themeable } from '../theme';
 
 const transitionStyles: {
@@ -174,7 +174,6 @@ export class Tab extends React.PureComponent<TabProps> {
                                 transitionStyles[status],
                                 activeKey === eventKey ? 'is-active' : '',
                                 'Tabs-pane',
-                                'fade',
                                 className
                             )}
                         >