feat(transitions): transitions添加slide动画特效

components/Transitions/Slide.tsx

@@ -0,0 +1,119 @@
+
+import {Component} from 'react';
+import * as React from 'react';
+import {IBaseComponent} from '../template/component';
+import {Transition} from 'react-transition-group';
+
+export interface ISlideProps extends IBaseComponent {
+  /**
+   * 动画时间 ms
+   */
+  timeout: number;
+  /**
+   * 激活状态
+   */
+  active: boolean;
+  /**
+   * 方向
+   */
+  direction: 'left' | 'top' | 'right' | 'bottom';
+}
+
+export interface ISlideState {
+
+}
+
+/**
+ * **组件中文名称**-组件描述。
+ */
+export class Slide extends Component<ISlideProps, ISlideState> {
+  refChild: HTMLElement;
+
+  static defaultProps = {
+  };
+
+  render() {
+    const {
+      active, timeout, children, direction,
+    } = this.props;
+    const transition = {
+      left: {
+        enter: 'translateX(0)',
+        exit: 'translateX(-100%)',
+      },
+      right: {
+        enter: 'translateX(0)',
+        exit: 'translateX(100%)',
+      },
+      top: {
+        enter: 'translateY(0)',
+        exit: 'translateY(-100%)',
+      },
+      bottom: {
+        enter: 'translateY(0)',
+        exit: 'translateY(100%)',
+      },
+    };
+
+    return (
+      <Transition
+        timeout={timeout}
+        in={active}
+        mountOnEnter
+        appear
+        onEnter={() => {
+          this.refChild.style.transform = transition[direction].exit;
+          this.refChild.style.opacity = '0';
+          this.refChild.style.display = null;
+        }}
+        onEntering={() => {
+          setTimeout(() => {
+            this.refChild.style.transform = transition[direction].enter;
+            this.refChild.style.opacity = '1';
+          }, 0);
+        }}
+        onEntered={() => {
+          this.refChild.style.transform = null;
+          this.refChild.style.opacity = null;
+        }}
+        onExit={() => {
+          this.refChild.style.transform = transition[direction].enter;
+          this.refChild.style.opacity = '1';
+        }}
+        onExiting={() => {
+          setTimeout(() => {
+            this.refChild.style.transform = transition[direction].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 Slide;

components/Transitions/index.tsx

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

components/Transitions/style/index.less

@@ -4,3 +4,9 @@
 .@{expand-prefix-cls} {
   overflow: hidden;
 }
+
+@slide-prefix-cls: ~"@{css-prefix}-slide";
+.@{slide-prefix-cls} {
+
+}
+

docs/pages/Transitions/api.tsx

@@ -16,5 +16,29 @@ export default [
         defaultValue: "-",
       },
     ]
+  },
+  {
+    title: "API - Slide",
+    intro: "Transitions.Slide",
+    json: [
+      {
+        props: "timeout",
+        intro: "动画时间",
+        type: "number",
+        defaultValue: "-",
+      },
+      {
+        props: "active",
+        intro: "激活状态",
+        type: "boolean",
+        defaultValue: "-",
+      },
+      {
+        props: "direction",
+        intro: "方向",
+        type: "`left` | `top` | `right` | `bottom`",
+        defaultValue: "-",
+      },
+    ]
   }
 ]

docs/pages/Transitions/demo/index.less

@@ -7,3 +7,27 @@
   text-align: center;
   margin-top: 10px;
 }
+
+.transitions-slide-demo {
+  &-box {
+    height: 220px;
+  }
+
+  &-left,
+  &-right,
+  &-top,
+  &-bottom {
+    display: inline-block;
+    margin-right: 20px;
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    background: @primary-color;
+    color: white;
+    line-height: 100px;
+    text-align: center;
+    font-size: 24px;
+  }
+
+
+}

docs/pages/Transitions/demo/transitionsCustom.md

@@ -1 +1,2 @@
-#### 
+#### Slide 划入、划出动画
+支持`left`、`right`、`top`、`bottom`四个方向。

docs/pages/Transitions/demo/transitionsCustom.tsx

@@ -1,13 +1,61 @@
 import * as React from 'react';
+import { Transitions, Switch } from '../../../../components/';
+import './index.less';
+
+const {Slide} = Transitions;
 
 export default class App extends React.Component {
   state = {
-    active: false,
+    active: true,
+  }
+
+  onSlide = (checked: boolean) => {
+    this.setState({
+      active: checked,
+    });
   }
 
   render () {
+    const {active} = this.state;
     return (
       <div>
+        <Switch checked={active} onChange={this.onSlide}>开/关</Switch>
+        <div className={'transitions-slide-demo-box'}>
+          <div>
+            <Slide
+            timeout={300}
+            active={active}
+            direction='top'
+            >
+              <div className={'transitions-slide-demo-top'}>top</div>
+            </Slide>
+            <Slide
+              timeout={300}
+              active={active}
+              direction='bottom'
+            >
+              <div className={'transitions-slide-demo-bottom'}>bottom</div>
+            </Slide>
+          </div>
+          <div>
+            <Slide
+              timeout={300}
+              active={active}
+              direction='left'
+            >
+              <div className={'transitions-slide-demo-left'}>left</div>
+            </Slide>
+            <Slide
+              timeout={300}
+              active={active}
+              direction='right'
+            >
+              <div className={'transitions-slide-demo-right'}>right</div>
+            </Slide>
+          </div>
+
+        </div>
+
       </div>
     )
   }

docs/pages/Transitions/index.tsx

@@ -10,9 +10,9 @@ import TransitionsDemo from './demo/transitionsDemo';
 import * as transitionsDemoMd from './demo/transitionsDemo.md';
 const transitionsDemoCode = require('!raw-loader!./demo/transitionsDemo');
 
-// import TransitionsCustom from './demo/transitionsCustom';
-// import * as transitionsCustomMd from './demo/transitionsCustom.md';
-// const transitionsCustomCode = require('!raw-loader!./demo/transitionsCustom');
+import TransitionsCustom from './demo/transitionsCustom';
+import * as transitionsCustomMd from './demo/transitionsCustom.md';
+const transitionsCustomCode = require('!raw-loader!./demo/transitionsCustom');
 
 export default class TransitionsPage extends Component {
   render() {
@@ -21,7 +21,7 @@ export default class TransitionsPage extends Component {
         <Markdown text={md}/>
         <CodeBox text={transitionsDemoMd} demo={<TransitionsDemo/>} code={transitionsDemoCode}/>
 
-        {/* <CodeBox text={transitionsCustomMd} demo={<TransitionsCustom/>} code={transitionsCustomCode}/> */}
+        <CodeBox text={transitionsCustomMd} demo={<TransitionsCustom/>} code={transitionsCustomCode}/>
         <ApiBox api={Api}/>
       </div>
     )