替换掉bootstrap中tabs/collapse的动画

scss/components/_collapse.scss

@@ -40,4 +40,21 @@
     &--collapsable &-header {
         user-select: none;
     }
+
+    > .collapse {
+        display: none;
+        &.in {
+            display: block;
+            visibility: visible;
+        }
+    }
+
+    > .collapsing {
+        position: relative;
+        height: 0;
+        overflow: hidden;
+        transition-property: height, visibility;
+        transition-duration: .35s;
+        transition-timing-function: ease;
+    }
 }

scss/components/_tabs.scss

@@ -64,6 +64,13 @@
         &.is-active {
             display: block;
         }
+        &.fade {
+            opacity: 0;
+            transition: opacity .35s linear;
+            &.in {
+                opacity: 1;
+            }
+        }
     }
 
     &--line {

src/components/Collapse.tsx

@@ -17,10 +17,10 @@ const collapseStyles: {
     [EXITED]: 'collapse',
     [EXITING]: 'collapsing',
     [ENTERING]: 'collapsing',
-    [ENTERED]: 'collapse show',
+    [ENTERED]: 'collapse in',
 };
 
-export interface CollapseProps  {
+export interface CollapseProps {
     show?: boolean,
     mountOnEnter?: boolean,
     unmountOnExit?: boolean,

src/components/Tabs.tsx

@@ -6,14 +6,16 @@
 
 import React from 'react';
 import { Schema } from '../types';
-import Transition, { ENTERED, ENTERING } from 'react-transition-group/Transition';
+import Transition, {ENTERED, ENTERING, EXITED, EXITING} from 'react-transition-group/Transition';
 import { ClassNamesFn, themeable } from '../theme';
 
 const transitionStyles: {
     [propName: string]: string;
 } = {
-    [ENTERING]: 'in',
-    [ENTERED]: 'in'
+    [EXITED]: 'fade',
+    [EXITING]: 'fade',
+    [ENTERING]: 'fade in',
+    [ENTERED]: 'fade in'
 };
 
 export interface TabProps extends Schema {
@@ -174,7 +176,6 @@ export class Tab extends React.PureComponent<TabProps> {
                                 transitionStyles[status],
                                 activeKey === eventKey ? 'is-active' : '',
                                 'Tabs-pane',
-                                'fade',
                                 className
                             )}
                         >