Add CSSMotion component

README.md

@@ -44,7 +44,57 @@ ReactDOM.render(
 , mountNode);
 ```
 
-## API
+
+## CSSMotion
+
+### props
+
+| Property | Type | Default | Description|
+| -------- | ---- | ------- | ---------- |
+| visible | boolean | true | Display child content or not |
+| children | function | | Render props of children content. Example [see below](#sample usage) |
+| motionName | string \| [motionNameObjProps](#motionNameObjProps) | | Set the className when motion start |
+| motionAppear | boolean | true | Support motion on appear |
+| motionEnter | boolean | true | Support motion on enter |
+| motionLeave | boolean | true | Support motion on leave |
+| onAppearStart | function | | Trigger when appear start |
+| onAppearActive | function | | Trigger when appear active |
+| onAppearEnd | function | | Trigger when appear end |
+| onEnterStart | function | | Trigger when enter start |
+| onEnterActive | function | | Trigger when enter active |
+| onEnterEnd | function | | Trigger when enter end |
+| onLeaveStart | function | | Trigger when leave start |
+| onLeaveActive | function | | Trigger when leave active |
+| onLeaveEnd | function | | Trigger when leave end |
+
+#### motionNameObjProps
+| Property | Type |
+| -------- | ---- |
+| appear | string |
+| appearActive | string |
+| enter | string |
+| enterActive | string |
+| leave | string |
+| leaveActive | string |
+
+### sample usage
+
+```jsx
+// Return customize style
+const onAppearStart = (ele) => ({ height: 0 });
+
+<CSSMotion
+  visible={show}
+  transitionName="transition"
+  onAppearStart={onAppearStart}
+>
+  {({ style, className }) => (
+    <div className={className} style={style} />
+  )}
+</CSSMotion>
+```
+
+## Animate (Deprecated)
 
 ### props
 

examples/CSSMotion.js

@@ -0,0 +1,87 @@
+/* eslint no-console:0, react/no-multi-comp:0 */
+
+import React from 'react';
+// import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import { CSSMotion } from 'rc-animate';
+import classNames from 'classnames';
+import './CSSMotion.less';
+
+class Demo extends React.Component {
+  state = {
+    show: true,
+  };
+
+  onTrigger = () => {
+    this.setState({
+      show: !this.state.show,
+    });
+  };
+
+  onCollapse = () => ({ height: 0 });
+
+  skipColorTransition = (_, event) => {
+    // CSSMotion support multiple transition.
+    // You can return false to prevent motion end when fast transition finished.
+    if (event.propertyName === 'background-color') {
+      return false;
+    }
+    return true;
+  };
+
+  styleGreen = () => ({
+    background: 'green',
+  });
+
+  render() {
+    const { show } = this.state;
+
+    return (
+      <div>
+        <label>
+          <input type="checkbox" onChange={this.onTrigger} checked={show} />
+          {' '}
+          Show Component
+        </label>
+        <div className="grid">
+          <div>
+            <h2>With Transition Class</h2>
+            <CSSMotion
+              visible={show}
+              motionName="transition"
+              onAppearStart={this.onCollapse}
+              onEnterStart={this.onCollapse}
+              onLeaveActive={this.onCollapse}
+
+              onEnterEnd={this.skipColorTransition}
+              onLeaveEnd={this.skipColorTransition}
+            >
+              {({ style, className }) => (
+                <div className={classNames('demo-block', className)} style={style} />
+              )}
+            </CSSMotion>
+          </div>
+
+          <div>
+            <h2>With Animation Class</h2>
+            <CSSMotion
+              visible={show}
+              motionName="animation"
+              onLeaveActive={this.styleGreen}
+            >
+              {({ style, className }) => (
+                <div className={classNames('demo-block', className)} style={style} />
+              )}
+            </CSSMotion>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+
+// Remove for IE9 test
+// const aaa = document.getElementsByClassName('navbar')[0];
+// aaa.parentNode.removeChild(aaa);

examples/CSSMotion.less

@@ -0,0 +1,86 @@
+.grid {
+  display: table;
+
+  > div {
+    display: table-cell;
+    min-width: 350px;
+  }
+}
+
+.demo-block {
+  display: block;
+  height: 300px;
+  width: 300px;
+  background: red;
+  overflow: hidden;
+}
+
+.transition {
+  transition: background .3s, height 1.3s, opacity 1.3s;
+
+  &.transition-appear,
+  &.transition-enter {
+    opacity: 0;
+  }
+
+  &.transition-appear.transition-appear-active,
+  &.transition-enter.transition-enter-active {
+    opacity: 1;
+  }
+
+  &.transition-leave-active {
+    opacity: 0;
+    background: green;
+  }
+}
+
+.animation {
+  animation-duration: 1.3s;
+  animation-fill-mode: both;
+
+  &.animation-appear,
+  &.animation-enter {
+    animation-name: enter;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+  }
+
+  &.animation-appear.animation-appear-active,
+  &.animation-enter.animation-enter-active {
+    animation-name: enter;
+    animation-play-state: running;
+  }
+
+  &.animation-leave {
+    animation-name: leave;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+
+    &.animation-leave-active {
+      animation-name: leave;
+      animation-play-state: running;
+    }
+  }
+}
+
+@keyframes enter {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes leave {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}

index.js

@@ -1,3 +1,4 @@
 // do not modify this file
 import Animate from './src/Animate';
+export CSSMotion from './src/CSSMotion';
 export default Animate;