Merge fa0f9c9 into 44a09d7

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

examples/CSSMotionDeadline.js

@@ -0,0 +1,73 @@
+/* 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,
+    });
+  };
+
+  onStart = (ele, event) => {
+    console.log('start!', ele, event);
+  };
+
+  onEnd = (ele, event) => {
+    console.log('end!', ele, event);
+  };
+
+  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="no-trigger"
+              motionDeadline={1000}
+              removeOnLeave
+              onAppearStart={this.onStart}
+              onEnterStart={this.onStart}
+              onLeaveStart={this.onStart}
+              onAppearEnd={this.onEnd}
+              onEnterEnd={this.onEnd}
+              onLeaveEnd={this.onEnd}
+            >
+              {({ style, className }, ref) => (
+                <div
+                  ref={ref}
+                  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);

src/CSSMotion.js

@@ -26,6 +26,7 @@ export const MotionPropTypes = {
   motionEnter: PropTypes.bool,
   motionLeave: PropTypes.bool,
   motionLeaveImmediately: PropTypes.bool, // Trigger leave motion immediately
+  motionDeadline: PropTypes.number,
   removeOnLeave: PropTypes.bool,
   leavedClassName: PropTypes.string,
   onAppearStart: PropTypes.func,
@@ -88,7 +89,13 @@ export function genCSSMotion(config) {
     static getDerivedStateFromProps(props, { prevProps, status: prevStatus }) {
       if (!isSupportTransition(props)) return {};
 
-      const { visible, motionAppear, motionEnter, motionLeave, motionLeaveImmediately } = props;
+      const {
+        visible,
+        motionAppear,
+        motionEnter,
+        motionLeave,
+        motionLeaveImmediately,
+      } = props;
       const newState = {
         prevProps: props,
       };
@@ -228,7 +235,9 @@ export function genCSSMotion(config) {
     };
 
     updateStatus = (styleFunc, additionalState, event, callback) => {
-      const statusStyle = styleFunc ? styleFunc(this.getElement(), event) : null;
+      const statusStyle = styleFunc
+        ? styleFunc(this.getElement(), event)
+        : null;
 
       if (statusStyle === false || this._destroyed) return;
 
@@ -256,7 +265,17 @@ export function genCSSMotion(config) {
         const { status } = this.state;
         if (status !== currentStatus) return;
 
+        const { motionDeadline } = this.props;
+
         this.updateStatus(styleFunc, { statusActive: true });
+
+        if (motionDeadline > 0) {
+          setTimeout(() => {
+            this.onMotionEnd({
+              deadline: true,
+            });
+          }, motionDeadline);
+        }
       });
     };
 
@@ -289,7 +308,10 @@ export function genCSSMotion(config) {
         if (visible) {
           return children({ ...eventProps }, this.setNodeRef);
         } else if (!removeOnLeave) {
-          return children({ ...eventProps, className: leavedClassName }, this.setNodeRef);
+          return children(
+            { ...eventProps, className: leavedClassName },
+            this.setNodeRef,
+          );
         }
 
         return null;
@@ -317,7 +339,9 @@ export function genCSSMotion(config) {
     return CSSMotion;
   }
 
-  return React.forwardRef((props, ref) => <CSSMotion internalRef={ref} {...props} />);
+  return React.forwardRef((props, ref) => (
+    <CSSMotion internalRef={ref} {...props} />
+  ));
 }
 
 export default genCSSMotion(supportTransition);