feat(scale): 添加scale过渡动画

components/Transitions/Expand.tsx

@@ -40,6 +40,7 @@ export class Expand extends Component<IExpandProps, IExpandState> {
         timeout={timeout}
         in={active}
         mountOnEnter
+        unmountOnExit
         appear
         onEnter={() => {
           this.refContainer.style.height = '0px';

components/Transitions/Scale.tsx

@@ -0,0 +1,103 @@
+
+import {Component} from 'react';
+import * as React from 'react';
+import {IBaseComponent} from '../template/component';
+import {Transition} from 'react-transition-group';
+
+export interface IScaleProps extends IBaseComponent {
+  /**
+   * 动画时间 ms
+   */
+  timeout: number;
+  /**
+   * 激活状态
+   */
+  active: boolean;
+}
+
+export interface IScaleState {
+
+}
+
+/**
+ * **组件中文名称**-组件描述。
+ */
+export class Scale extends Component<IScaleProps, IScaleState> {
+  refChild: HTMLElement;
+
+  static defaultProps = {
+  };
+
+  render() {
+    const {
+      active, timeout, children,
+    } = this.props;
+
+    const transition = {
+      exit: 'scale(0)',
+      enter: 'scale(1)',
+    };
+
+    return (
+      <Transition
+        timeout={timeout}
+        in={active}
+        mountOnEnter
+        unmountOnExit
+        appear
+        onEnter={() => {
+          this.refChild.style.transform = transition.exit;
+          this.refChild.style.opacity = '0';
+          this.refChild.style.display = null;
+        }}
+        onEntering={() => {
+          setTimeout(() => {
+            this.refChild.style.transform = transition.enter;
+            this.refChild.style.opacity = '1';
+          }, 0);
+        }}
+        onEntered={() => {
+          this.refChild.style.transform = null;
+          this.refChild.style.opacity = null;
+        }}
+        onExit={() => {
+          this.refChild.style.transform = transition.enter;
+          this.refChild.style.opacity = '1';
+        }}
+        onExiting={() => {
+          setTimeout(() => {
+            this.refChild.style.transform = transition.exit;
+            this.refChild.style.opacity = '0';
+          }, 0);
+        }}
+        onExited={() => {
+          this.refChild.style.transform = null;
+          this.refChild.style.opacity = null;
+          this.refChild.style.display = 'none';
+        }}
+      >
+        {
+          () => {
+            const child = React.Children.only(children);
+            return React.cloneElement(child, {
+              style: {
+                ...child.props.style,
+                transition: `all ${timeout / 1000}s cubic-bezier(.645,.045,.355,1)`,
+              },
+              ref: (v: HTMLElement) => {
+                if (v) {
+                  this.refChild = v;
+                }
+                if (child.props.ref) {
+                  child.props.ref();
+                }
+              }
+            });
+          }
+        }
+      </Transition>
+    );
+  }
+}
+
+export default Scale;

components/Transitions/Slide.tsx

@@ -60,6 +60,7 @@ export class Slide extends Component<ISlideProps, ISlideState> {
         timeout={timeout}
         in={active}
         mountOnEnter
+        unmountOnExit
         appear
         onEnter={() => {
           this.refChild.style.transform = transition[direction].exit;

components/Transitions/index.tsx

@@ -1,9 +1,11 @@
 import Expand from './Expand';
 import Slide from './Slide';
+import Scale from './Scale';
 
 const Transitions = {
   Expand,
   Slide,
+  Scale,
 };
 
 export default Transitions;

docs/pages/Transitions/demo/transitionsDemo.tsx

@@ -22,7 +22,7 @@ export default class App extends React.Component {
       lineHeight: `${height}px`,
     };
     return (
-      <div>
+      <div style={{height: 300}}>
         <Button onClick={this.onExpand}>展开折叠</Button>
         <Expand
           timeout={300}

docs/pages/Transitions/demo/transitionsScale.md

@@ -0,0 +1 @@
+#### Scale 放缩

docs/pages/Transitions/demo/transitionsScale.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Transitions, Switch } from '../../../../components/';
+import './index.less';
+
+const {Scale} = Transitions;
+
+export default class App extends React.Component {
+  state = {
+    active: true,
+  }
+
+  onScale = (checked: boolean) => {
+    this.setState({
+      active: checked,
+    });
+  }
+
+  render () {
+    const height = 200;
+    const {active} = this.state;
+    const style: React.CSSProperties = {
+      height,
+      lineHeight: `${height}px`,
+    };
+    return (
+      <div style={{height: 300}}>
+        <Switch checked={active} onChange={this.onScale}>开/关</Switch>
+        <Scale
+          timeout={300}
+          active={active}
+        >
+          <div
+            className='transitions-expand-demo-box'
+            style={style}
+          >
+            放缩
+          </div>
+        </Scale>
+      </div>
+    )
+  }
+}

docs/pages/Transitions/index.tsx

@@ -14,6 +14,10 @@ import TransitionsCustom from './demo/transitionsCustom';
 import * as transitionsCustomMd from './demo/transitionsCustom.md';
 const transitionsCustomCode = require('!raw-loader!./demo/transitionsCustom');
 
+import TransitionsScale from './demo/transitionsScale';
+import * as transitionsScaleMd from './demo/transitionsScale.md';
+const transitionsScaleCode = require('!raw-loader!./demo/transitionsScale');
+
 export default class TransitionsPage extends Component {
   render() {
     return (
@@ -22,6 +26,8 @@ export default class TransitionsPage extends Component {
         <CodeBox text={transitionsDemoMd} demo={<TransitionsDemo/>} code={transitionsDemoCode}/>
 
         <CodeBox text={transitionsCustomMd} demo={<TransitionsCustom/>} code={transitionsCustomCode}/>
+
+        <CodeBox text={transitionsScaleMd} demo={<TransitionsScale/>} code={transitionsScaleCode}/>
         <ApiBox api={Api}/>
       </div>
     )