rc-motion - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

es/CSSMotion.d.ts

 import * as React from 'react';
-import { MotionEventHandler, MotionEndEventHandler, MotionStatus } from './interface';
+import { MotionStatus, MotionEventHandler, MotionEndEventHandler, MotionPrepareEventHandler } from './interface';
 export declare type CSSMotionConfig = boolean | {
     transitionSupport?: boolean;
+    /** @deprecated, no need this anymore since `rc-motion` only support latest react */
     forwardRef?: boolean;
@@ -26,2 +27,5 @@ };
     eventProps?: object;
+    onAppearPrepare?: MotionPrepareEventHandler;
+    onEnterPrepare?: MotionPrepareEventHandler;
+    onLeavePrepare?: MotionPrepareEventHandler;
     onAppearStart?: MotionEventHandler;
@@ -41,3 +45,3 @@ onEnterStart?: MotionEventHandler;
         [key: string]: any;
-    }, ref: (node: any) => void) => React.ReactNode;
+    }, ref: (node: any) => void) => React.ReactElement;
 }
@@ -55,4 +59,8 @@ export interface CSSMotionState {
  */
-export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps>;
-declare const _default: React.ForwardRefExoticComponent<CSSMotionProps>;
+export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps & {
+    ref?: React.Ref<any>;
+}>;
+declare const _default: React.ForwardRefExoticComponent<CSSMotionProps & {
+    ref?: React.Ref<any>;
+}>;
 export default _default;

es/CSSMotion.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
@@ -12,8 +8,11 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import findDOMNode from "rc-util/es/Dom/findDOMNode";
 import { fillRef } from "rc-util/es/ref";
 import classNames from 'classnames';
-import raf from 'raf';
-import { getTransitionName, animationEndName, transitionEndName, supportTransition } from './util/motion';
-import { STATUS_NONE, STATUS_APPEAR, STATUS_ENTER, STATUS_LEAVE } from './interface';
+import { getTransitionName, supportTransition } from './util/motion';
+import { STATUS_NONE, STEP_PREPARE, STEP_START } from './interface';
+import useStatus from './hooks/useStatus';
+import DomWrapper from './DomWrapper';
+import { isActive } from './hooks/useStepQueue';
 /**
@@ -26,7 +25,5 @@ * `transitionSupport` is used for none transition test case.
   var transitionSupport = config;
-  var forwardRef = !!React.forwardRef;
 
   if (_typeof(config) === 'object') {
     transitionSupport = config.transitionSupport;
-    forwardRef = 'forwardRef' in config ? config.forwardRef : forwardRef;
   }
@@ -38,310 +35,83 @@
 
-  var CSSMotion = /*#__PURE__*/function (_React$Component) {
-    _inherits(CSSMotion, _React$Component);
+  var CSSMotion = React.forwardRef(function (props, ref) {
+    var _props$visible = props.visible,
+        visible = _props$visible === void 0 ? true : _props$visible,
+        _props$removeOnLeave = props.removeOnLeave,
+        removeOnLeave = _props$removeOnLeave === void 0 ? true : _props$removeOnLeave,
+        children = props.children,
+        motionName = props.motionName,
+        leavedClassName = props.leavedClassName,
+        eventProps = props.eventProps;
+    var supportMotion = isSupportTransition(props); // Ref to the react node, it may be a HTMLElement
 
-    var _super = _createSuper(CSSMotion);
+    var nodeRef = useRef(); // Ref to the dom wrapper in case ref can not pass to HTMLElement
 
-    function CSSMotion() {
-      var _this;
+    var wrapperNodeRef = useRef();
 
-      _classCallCheck(this, CSSMotion);
-
-      _this = _super.apply(this, arguments);
-      _this.$cacheEle = null;
-      _this.node = null;
-      _this.raf = null;
-      _this.destroyed = false;
-      _this.deadlineId = null;
-      _this.state = {
-        status: STATUS_NONE,
-        statusActive: false,
-        newStatus: false,
-        statusStyle: null
-      };
-
-      _this.onDomUpdate = function () {
-        var _this$state = _this.state,
-            status = _this$state.status,
-            newStatus = _this$state.newStatus;
-        var _this$props = _this.props,
-            onAppearStart = _this$props.onAppearStart,
-            onEnterStart = _this$props.onEnterStart,
-            onLeaveStart = _this$props.onLeaveStart,
-            onAppearActive = _this$props.onAppearActive,
-            onEnterActive = _this$props.onEnterActive,
-            onLeaveActive = _this$props.onLeaveActive,
-            motionAppear = _this$props.motionAppear,
-            motionEnter = _this$props.motionEnter,
-            motionLeave = _this$props.motionLeave;
-
-        if (!isSupportTransition(_this.props)) {
-          return;
-        } // Event injection
-
-
-        var $ele = _this.getElement();
-
-        if (_this.$cacheEle !== $ele) {
-          _this.removeEventListener(_this.$cacheEle);
-
-          _this.addEventListener($ele);
-
-          _this.$cacheEle = $ele;
-        } // Init status
-
-
-        if (newStatus && status === STATUS_APPEAR && motionAppear) {
-          _this.updateStatus(onAppearStart, null, null, function () {
-            _this.updateActiveStatus(onAppearActive, STATUS_APPEAR);
-          });
-        } else if (newStatus && status === STATUS_ENTER && motionEnter) {
-          _this.updateStatus(onEnterStart, null, null, function () {
-            _this.updateActiveStatus(onEnterActive, STATUS_ENTER);
-          });
-        } else if (newStatus && status === STATUS_LEAVE && motionLeave) {
-          _this.updateStatus(onLeaveStart, null, null, function () {
-            _this.updateActiveStatus(onLeaveActive, STATUS_LEAVE);
-          });
-        }
-      };
-
-      _this.onMotionEnd = function (event) {
-        if (event && !event.deadline && event.target !== _this.getElement()) {
-          // event exists
-          // not initiated by deadline
-          // transitionend not fired by inner elements
-          return;
-        }
-
-        var _this$state2 = _this.state,
-            status = _this$state2.status,
-            statusActive = _this$state2.statusActive;
-        var _this$props2 = _this.props,
-            onAppearEnd = _this$props2.onAppearEnd,
-            onEnterEnd = _this$props2.onEnterEnd,
-            onLeaveEnd = _this$props2.onLeaveEnd;
-
-        if (status === STATUS_APPEAR && statusActive) {
-          _this.updateStatus(onAppearEnd, {
-            status: STATUS_NONE
-          }, event);
-        } else if (status === STATUS_ENTER && statusActive) {
-          _this.updateStatus(onEnterEnd, {
-            status: STATUS_NONE
-          }, event);
-        } else if (status === STATUS_LEAVE && statusActive) {
-          _this.updateStatus(onLeaveEnd, {
-            status: STATUS_NONE
-          }, event);
-        }
-      };
-
-      _this.setNodeRef = function (node) {
-        var internalRef = _this.props.internalRef;
-        _this.node = node;
-        fillRef(internalRef, node);
-      };
-
-      _this.getElement = function () {
-        try {
-          return findDOMNode(_this.node || _assertThisInitialized(_this));
-        } catch (e) {
-          /**
-           * Fallback to cache element.
-           * This is only happen when `motionDeadline` trigger but element removed.
-           */
-          return _this.$cacheEle;
-        }
-      };
-
-      _this.addEventListener = function ($ele) {
-        if (!$ele) return;
-        $ele.addEventListener(transitionEndName, _this.onMotionEnd);
-        $ele.addEventListener(animationEndName, _this.onMotionEnd);
-      };
-
-      _this.removeEventListener = function ($ele) {
-        if (!$ele) return;
-        $ele.removeEventListener(transitionEndName, _this.onMotionEnd);
-        $ele.removeEventListener(animationEndName, _this.onMotionEnd);
-      };
-
-      _this.updateStatus = function (styleFunc, additionalState, event, callback) {
-        var statusStyle = styleFunc ? styleFunc(_this.getElement(), event) : null;
-        if (statusStyle === false || _this.destroyed) return;
-        var nextStep;
-
-        if (callback) {
-          nextStep = function nextStep() {
-            _this.nextFrame(callback);
-          };
-        }
-
-        _this.setState(_objectSpread({
-          statusStyle: _typeof(statusStyle) === 'object' ? statusStyle : null,
-          newStatus: false
-        }, additionalState), nextStep); // Trigger before next frame & after `componentDidMount`
-
-      };
-
-      _this.updateActiveStatus = function (styleFunc, currentStatus) {
-        // `setState` use `postMessage` to trigger at the end of frame.
-        // Let's use requestAnimationFrame to update new state in next frame.
-        _this.nextFrame(function () {
-          var status = _this.state.status;
-          if (status !== currentStatus) return;
-          var motionDeadline = _this.props.motionDeadline;
-
-          _this.updateStatus(styleFunc, {
-            statusActive: true
-          });
-
-          if (motionDeadline > 0) {
-            _this.deadlineId = setTimeout(function () {
-              _this.onMotionEnd({
-                deadline: true
-              });
-            }, motionDeadline);
-          }
-        });
-      };
-
-      _this.nextFrame = function (func) {
-        _this.cancelNextFrame();
-
-        _this.raf = raf(func);
-      };
-
-      _this.cancelNextFrame = function () {
-        if (_this.raf) {
-          raf.cancel(_this.raf);
-          _this.raf = null;
-        }
-      };
-
-      return _this;
+    function getDomElement() {
+      try {
+        return findDOMNode(nodeRef.current || wrapperNodeRef.current);
+      } catch (e) {
+        // Only happen when `motionDeadline` trigger but element removed.
+        return null;
+      }
     }
 
-    _createClass(CSSMotion, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        this.onDomUpdate();
-      }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate() {
-        this.onDomUpdate();
-      }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        this.destroyed = true;
-        this.removeEventListener(this.$cacheEle);
-        this.cancelNextFrame();
-        clearTimeout(this.deadlineId);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _classNames;
+    var _useStatus = useStatus(supportMotion, visible, getDomElement, props),
+        _useStatus2 = _slicedToArray(_useStatus, 3),
+        status = _useStatus2[0],
+        statusStep = _useStatus2[1],
+        statusStyle = _useStatus2[2]; // ====================== Refs ======================
 
-        var _this$state3 = this.state,
-            status = _this$state3.status,
-            statusActive = _this$state3.statusActive,
-            statusStyle = _this$state3.statusStyle;
-        var _this$props3 = this.props,
-            children = _this$props3.children,
-            motionName = _this$props3.motionName,
-            visible = _this$props3.visible,
-            removeOnLeave = _this$props3.removeOnLeave,
-            leavedClassName = _this$props3.leavedClassName,
-            eventProps = _this$props3.eventProps;
-        if (!children) return null;
 
-        if (status === STATUS_NONE || !isSupportTransition(this.props)) {
-          if (visible) {
-            return children(_objectSpread({}, eventProps), this.setNodeRef);
-          }
+    var originRef = useRef(ref);
+    originRef.current = ref;
+    var setNodeRef = React.useCallback(function (node) {
+      nodeRef.current = node;
+      fillRef(originRef.current, node);
+    }, []); // ===================== Render =====================
 
-          if (!removeOnLeave) {
-            return children(_objectSpread(_objectSpread({}, eventProps), {}, {
-              className: leavedClassName
-            }), this.setNodeRef);
-          }
+    var motionChildren;
 
-          return null;
-        }
-
-        return children(_objectSpread(_objectSpread({}, eventProps), {}, {
-          className: classNames(getTransitionName(motionName, status), (_classNames = {}, _defineProperty(_classNames, getTransitionName(motionName, "".concat(status, "-active")), statusActive), _defineProperty(_classNames, motionName, typeof motionName === 'string'), _classNames)),
-          style: statusStyle
-        }), this.setNodeRef);
+    if (!children) {
+      // No children
+      motionChildren = null;
+    } else if (status === STATUS_NONE || !isSupportTransition(props)) {
+      // Stable children
+      if (visible) {
+        motionChildren = children(_objectSpread({}, eventProps), setNodeRef);
+      } else if (!removeOnLeave) {
+        motionChildren = children(_objectSpread(_objectSpread({}, eventProps), {}, {
+          className: leavedClassName
+        }), setNodeRef);
+      } else {
+        motionChildren = null;
       }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, _ref) {
-        var prevProps = _ref.prevProps,
-            prevStatus = _ref.status;
-        if (!isSupportTransition(props)) return {};
-        var visible = props.visible,
-            motionAppear = props.motionAppear,
-            motionEnter = props.motionEnter,
-            motionLeave = props.motionLeave,
-            motionLeaveImmediately = props.motionLeaveImmediately;
-        var newState = {
-          prevProps: props
-        }; // Clean up status if prop set to false
+    } else {
+      var _classNames;
 
-        if (prevStatus === STATUS_APPEAR && !motionAppear || prevStatus === STATUS_ENTER && !motionEnter || prevStatus === STATUS_LEAVE && !motionLeave) {
-          newState.status = STATUS_NONE;
-          newState.statusActive = false;
-          newState.newStatus = false;
-        } // Appear
+      // In motion
+      var statusSuffix;
 
-
-        if (!prevProps && visible && motionAppear) {
-          newState.status = STATUS_APPEAR;
-          newState.statusActive = false;
-          newState.newStatus = true;
-        } // Enter
-
-
-        if (prevProps && !prevProps.visible && visible && motionEnter) {
-          newState.status = STATUS_ENTER;
-          newState.statusActive = false;
-          newState.newStatus = true;
-        } // Leave
-
-
-        if (prevProps && prevProps.visible && !visible && motionLeave || !prevProps && motionLeaveImmediately && !visible && motionLeave) {
-          newState.status = STATUS_LEAVE;
-          newState.statusActive = false;
-          newState.newStatus = true;
-        }
-
-        return newState;
+      if (statusStep === STEP_PREPARE) {
+        statusSuffix = 'prepare';
+      } else if (isActive(statusStep)) {
+        statusSuffix = 'active';
+      } else if (statusStep === STEP_START) {
+        statusSuffix = 'start';
       }
-    }]);
 
-    return CSSMotion;
-  }(React.Component);
+      motionChildren = children(_objectSpread(_objectSpread({}, eventProps), {}, {
+        className: classNames(getTransitionName(motionName, status), (_classNames = {}, _defineProperty(_classNames, getTransitionName(motionName, "".concat(status, "-").concat(statusSuffix)), statusSuffix), _defineProperty(_classNames, motionName, typeof motionName === 'string'), _classNames)),
+        style: statusStyle
+      }), setNodeRef);
+    }
 
-  CSSMotion.defaultProps = {
-    visible: true,
-    motionEnter: true,
-    motionAppear: true,
-    motionLeave: true,
-    removeOnLeave: true
-  };
-
-  if (!forwardRef) {
-    return CSSMotion;
-  }
-
-  return React.forwardRef(function (props, ref) {
-    return React.createElement(CSSMotion, Object.assign({
-      internalRef: ref
-    }, props));
+    return React.createElement(DomWrapper, {
+      ref: wrapperNodeRef
+    }, motionChildren);
   });
+  CSSMotion.displayName = 'CSSMotion';
+  return CSSMotion;
 }
 export default genCSSMotion(supportTransition);

es/CSSMotionList.d.ts

@@ -14,4 +14,6 @@ import * as React from 'react';
 }
-export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps>): React.ComponentClass<CSSMotionListProps>;
+export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps & {
+    ref?: React.Ref<any>;
+}>): React.ComponentClass<CSSMotionListProps>;
 declare const _default: React.ComponentClass<CSSMotionListProps, any>;
 export default _default;

es/interface.d.ts

@@ -7,6 +7,13 @@ /// <reference types="react" />
 export declare type MotionStatus = typeof STATUS_NONE | typeof STATUS_APPEAR | typeof STATUS_ENTER | typeof STATUS_LEAVE;
+export declare const STEP_NONE: "none";
+export declare const STEP_PREPARE: "prepare";
+export declare const STEP_START: "start";
+export declare const STEP_ACTIVE: "active";
+export declare const STEP_ACTIVATED: "end";
+export declare type StepStatus = typeof STEP_NONE | typeof STEP_PREPARE | typeof STEP_START | typeof STEP_ACTIVE | typeof STEP_ACTIVATED;
 export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
     deadline?: boolean;
 };
+export declare type MotionPrepareEventHandler = (element: HTMLElement) => Promise<any>;
 export declare type MotionEventHandler = (element: HTMLElement, event: MotionEvent) => React.CSSProperties | void;
 export declare type MotionEndEventHandler = (element: HTMLElement, event: MotionEvent) => boolean | void;

es/interface.js

 export var STATUS_NONE = 'none';
 export var STATUS_APPEAR = 'appear';
 export var STATUS_ENTER = 'enter';
-export var STATUS_LEAVE = 'leave';
+export var STATUS_LEAVE = 'leave';
+export var STEP_NONE = 'none';
+export var STEP_PREPARE = 'prepare';
+export var STEP_START = 'start';
+export var STEP_ACTIVE = 'active';
+export var STEP_ACTIVATED = 'end';

es/util/motion.d.ts

@@ -7,5 +7,5 @@ import { MotionName } from '../CSSMotion';
 export declare function getVendorPrefixedEventName(eventName: string): any;
+export declare const supportTransition: boolean;
 export declare const animationEndName: any;
 export declare const transitionEndName: any;
-export declare const supportTransition: boolean;
 export declare function getTransitionName(transitionName: MotionName, transitionType: string): any;

es/util/motion.js

 import _typeof from "@babel/runtime/helpers/esm/typeof";
-var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); // ================= Transition =================
+import canUseDOM from "rc-util/es/Dom/canUseDom"; // ================= Transition =================
 // Event wrapper. Copy from react source code
@@ -33,6 +33,6 @@
 }
-var vendorPrefixes = getVendorPrefixes(canUseDOM, typeof window !== 'undefined' ? window : {});
+var vendorPrefixes = getVendorPrefixes(canUseDOM(), typeof window !== 'undefined' ? window : {});
 var style = {};
 
-if (canUseDOM) {
+if (canUseDOM()) {
   var _document$createEleme = document.createElement('div');
@@ -67,5 +67,7 @@
 }
-export var animationEndName = getVendorPrefixedEventName('animationend');
-export var transitionEndName = getVendorPrefixedEventName('transitionend');
-export var supportTransition = !!(animationEndName && transitionEndName);
+var internalAnimationEndName = getVendorPrefixedEventName('animationend');
+var internalTransitionEndName = getVendorPrefixedEventName('transitionend');
+export var supportTransition = !!(internalAnimationEndName && internalTransitionEndName);
+export var animationEndName = internalAnimationEndName || 'animationend';
+export var transitionEndName = internalTransitionEndName || 'transitionend';
 export function getTransitionName(transitionName, transitionType) {
@@ -72,0 +74,0 @@ if (!transitionName) return null;

lib/CSSMotion.d.ts

 import * as React from 'react';
-import { MotionEventHandler, MotionEndEventHandler, MotionStatus } from './interface';
+import { MotionStatus, MotionEventHandler, MotionEndEventHandler, MotionPrepareEventHandler } from './interface';
 export declare type CSSMotionConfig = boolean | {
     transitionSupport?: boolean;
+    /** @deprecated, no need this anymore since `rc-motion` only support latest react */
     forwardRef?: boolean;
@@ -26,2 +27,5 @@ };
     eventProps?: object;
+    onAppearPrepare?: MotionPrepareEventHandler;
+    onEnterPrepare?: MotionPrepareEventHandler;
+    onLeavePrepare?: MotionPrepareEventHandler;
     onAppearStart?: MotionEventHandler;
@@ -41,3 +45,3 @@ onEnterStart?: MotionEventHandler;
         [key: string]: any;
-    }, ref: (node: any) => void) => React.ReactNode;
+    }, ref: (node: any) => void) => React.ReactElement;
 }
@@ -55,4 +59,8 @@ export interface CSSMotionState {
  */
-export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps>;
-declare const _default: React.ForwardRefExoticComponent<CSSMotionProps>;
+export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps & {
+    ref?: React.Ref<any>;
+}>;
+declare const _default: React.ForwardRefExoticComponent<CSSMotionProps & {
+    ref?: React.Ref<any>;
+}>;
 export default _default;

lib/CSSMotion.js

@@ -17,12 +17,4 @@ "use strict";
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -34,8 +26,6 @@
 
-var _ref2 = require("rc-util/lib/ref");
+var _ref = require("rc-util/lib/ref");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _raf = _interopRequireDefault(require("raf"));
-
 var _motion = require("./util/motion");
@@ -45,2 +35,8 @@
 
+var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
+
+var _DomWrapper = _interopRequireDefault(require("./DomWrapper"));
+
+var _useStepQueue = require("./hooks/useStepQueue");
+
 /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
@@ -54,7 +50,5 @@
   var transitionSupport = config;
-  var forwardRef = !!React.forwardRef;
 
   if ((0, _typeof2.default)(config) === 'object') {
     transitionSupport = config.transitionSupport;
-    forwardRef = 'forwardRef' in config ? config.forwardRef : forwardRef;
   }
@@ -66,308 +60,82 @@
 
-  var CSSMotion = /*#__PURE__*/function (_React$Component) {
-    (0, _inherits2.default)(CSSMotion, _React$Component);
+  var CSSMotion = React.forwardRef(function (props, ref) {
+    var _props$visible = props.visible,
+        visible = _props$visible === void 0 ? true : _props$visible,
+        _props$removeOnLeave = props.removeOnLeave,
+        removeOnLeave = _props$removeOnLeave === void 0 ? true : _props$removeOnLeave,
+        children = props.children,
+        motionName = props.motionName,
+        leavedClassName = props.leavedClassName,
+        eventProps = props.eventProps;
+    var supportMotion = isSupportTransition(props); // Ref to the react node, it may be a HTMLElement
 
-    var _super = (0, _createSuper2.default)(CSSMotion);
+    var nodeRef = (0, React.useRef)(); // Ref to the dom wrapper in case ref can not pass to HTMLElement
 
-    function CSSMotion() {
-      var _this;
+    var wrapperNodeRef = (0, React.useRef)();
 
-      (0, _classCallCheck2.default)(this, CSSMotion);
-      _this = _super.apply(this, arguments);
-      _this.$cacheEle = null;
-      _this.node = null;
-      _this.raf = null;
-      _this.destroyed = false;
-      _this.deadlineId = null;
-      _this.state = {
-        status: _interface.STATUS_NONE,
-        statusActive: false,
-        newStatus: false,
-        statusStyle: null
-      };
-
-      _this.onDomUpdate = function () {
-        var _this$state = _this.state,
-            status = _this$state.status,
-            newStatus = _this$state.newStatus;
-        var _this$props = _this.props,
-            onAppearStart = _this$props.onAppearStart,
-            onEnterStart = _this$props.onEnterStart,
-            onLeaveStart = _this$props.onLeaveStart,
-            onAppearActive = _this$props.onAppearActive,
-            onEnterActive = _this$props.onEnterActive,
-            onLeaveActive = _this$props.onLeaveActive,
-            motionAppear = _this$props.motionAppear,
-            motionEnter = _this$props.motionEnter,
-            motionLeave = _this$props.motionLeave;
-
-        if (!isSupportTransition(_this.props)) {
-          return;
-        } // Event injection
-
-
-        var $ele = _this.getElement();
-
-        if (_this.$cacheEle !== $ele) {
-          _this.removeEventListener(_this.$cacheEle);
-
-          _this.addEventListener($ele);
-
-          _this.$cacheEle = $ele;
-        } // Init status
-
-
-        if (newStatus && status === _interface.STATUS_APPEAR && motionAppear) {
-          _this.updateStatus(onAppearStart, null, null, function () {
-            _this.updateActiveStatus(onAppearActive, _interface.STATUS_APPEAR);
-          });
-        } else if (newStatus && status === _interface.STATUS_ENTER && motionEnter) {
-          _this.updateStatus(onEnterStart, null, null, function () {
-            _this.updateActiveStatus(onEnterActive, _interface.STATUS_ENTER);
-          });
-        } else if (newStatus && status === _interface.STATUS_LEAVE && motionLeave) {
-          _this.updateStatus(onLeaveStart, null, null, function () {
-            _this.updateActiveStatus(onLeaveActive, _interface.STATUS_LEAVE);
-          });
-        }
-      };
-
-      _this.onMotionEnd = function (event) {
-        if (event && !event.deadline && event.target !== _this.getElement()) {
-          // event exists
-          // not initiated by deadline
-          // transitionend not fired by inner elements
-          return;
-        }
-
-        var _this$state2 = _this.state,
-            status = _this$state2.status,
-            statusActive = _this$state2.statusActive;
-        var _this$props2 = _this.props,
-            onAppearEnd = _this$props2.onAppearEnd,
-            onEnterEnd = _this$props2.onEnterEnd,
-            onLeaveEnd = _this$props2.onLeaveEnd;
-
-        if (status === _interface.STATUS_APPEAR && statusActive) {
-          _this.updateStatus(onAppearEnd, {
-            status: _interface.STATUS_NONE
-          }, event);
-        } else if (status === _interface.STATUS_ENTER && statusActive) {
-          _this.updateStatus(onEnterEnd, {
-            status: _interface.STATUS_NONE
-          }, event);
-        } else if (status === _interface.STATUS_LEAVE && statusActive) {
-          _this.updateStatus(onLeaveEnd, {
-            status: _interface.STATUS_NONE
-          }, event);
-        }
-      };
-
-      _this.setNodeRef = function (node) {
-        var internalRef = _this.props.internalRef;
-        _this.node = node;
-        (0, _ref2.fillRef)(internalRef, node);
-      };
-
-      _this.getElement = function () {
-        try {
-          return (0, _findDOMNode.default)(_this.node || (0, _assertThisInitialized2.default)(_this));
-        } catch (e) {
-          /**
-           * Fallback to cache element.
-           * This is only happen when `motionDeadline` trigger but element removed.
-           */
-          return _this.$cacheEle;
-        }
-      };
-
-      _this.addEventListener = function ($ele) {
-        if (!$ele) return;
-        $ele.addEventListener(_motion.transitionEndName, _this.onMotionEnd);
-        $ele.addEventListener(_motion.animationEndName, _this.onMotionEnd);
-      };
-
-      _this.removeEventListener = function ($ele) {
-        if (!$ele) return;
-        $ele.removeEventListener(_motion.transitionEndName, _this.onMotionEnd);
-        $ele.removeEventListener(_motion.animationEndName, _this.onMotionEnd);
-      };
-
-      _this.updateStatus = function (styleFunc, additionalState, event, callback) {
-        var statusStyle = styleFunc ? styleFunc(_this.getElement(), event) : null;
-        if (statusStyle === false || _this.destroyed) return;
-        var nextStep;
-
-        if (callback) {
-          nextStep = function nextStep() {
-            _this.nextFrame(callback);
-          };
-        }
-
-        _this.setState((0, _objectSpread2.default)({
-          statusStyle: (0, _typeof2.default)(statusStyle) === 'object' ? statusStyle : null,
-          newStatus: false
-        }, additionalState), nextStep); // Trigger before next frame & after `componentDidMount`
-
-      };
-
-      _this.updateActiveStatus = function (styleFunc, currentStatus) {
-        // `setState` use `postMessage` to trigger at the end of frame.
-        // Let's use requestAnimationFrame to update new state in next frame.
-        _this.nextFrame(function () {
-          var status = _this.state.status;
-          if (status !== currentStatus) return;
-          var motionDeadline = _this.props.motionDeadline;
-
-          _this.updateStatus(styleFunc, {
-            statusActive: true
-          });
-
-          if (motionDeadline > 0) {
-            _this.deadlineId = setTimeout(function () {
-              _this.onMotionEnd({
-                deadline: true
-              });
-            }, motionDeadline);
-          }
-        });
-      };
-
-      _this.nextFrame = function (func) {
-        _this.cancelNextFrame();
-
-        _this.raf = (0, _raf.default)(func);
-      };
-
-      _this.cancelNextFrame = function () {
-        if (_this.raf) {
-          _raf.default.cancel(_this.raf);
-
-          _this.raf = null;
-        }
-      };
-
-      return _this;
+    function getDomElement() {
+      try {
+        return (0, _findDOMNode.default)(nodeRef.current || wrapperNodeRef.current);
+      } catch (e) {
+        // Only happen when `motionDeadline` trigger but element removed.
+        return null;
+      }
     }
 
-    (0, _createClass2.default)(CSSMotion, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        this.onDomUpdate();
-      }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate() {
-        this.onDomUpdate();
-      }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        this.destroyed = true;
-        this.removeEventListener(this.$cacheEle);
-        this.cancelNextFrame();
-        clearTimeout(this.deadlineId);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _classNames;
+    var _useStatus = (0, _useStatus3.default)(supportMotion, visible, getDomElement, props),
+        _useStatus2 = (0, _slicedToArray2.default)(_useStatus, 3),
+        status = _useStatus2[0],
+        statusStep = _useStatus2[1],
+        statusStyle = _useStatus2[2]; // ====================== Refs ======================
 
-        var _this$state3 = this.state,
-            status = _this$state3.status,
-            statusActive = _this$state3.statusActive,
-            statusStyle = _this$state3.statusStyle;
-        var _this$props3 = this.props,
-            children = _this$props3.children,
-            motionName = _this$props3.motionName,
-            visible = _this$props3.visible,
-            removeOnLeave = _this$props3.removeOnLeave,
-            leavedClassName = _this$props3.leavedClassName,
-            eventProps = _this$props3.eventProps;
-        if (!children) return null;
 
-        if (status === _interface.STATUS_NONE || !isSupportTransition(this.props)) {
-          if (visible) {
-            return children((0, _objectSpread2.default)({}, eventProps), this.setNodeRef);
-          }
+    var originRef = (0, React.useRef)(ref);
+    originRef.current = ref;
+    var setNodeRef = React.useCallback(function (node) {
+      nodeRef.current = node;
+      (0, _ref.fillRef)(originRef.current, node);
+    }, []); // ===================== Render =====================
 
-          if (!removeOnLeave) {
-            return children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, {
-              className: leavedClassName
-            }), this.setNodeRef);
-          }
+    var motionChildren;
 
-          return null;
-        }
-
-        return children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, {
-          className: (0, _classnames.default)((0, _motion.getTransitionName)(motionName, status), (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _motion.getTransitionName)(motionName, "".concat(status, "-active")), statusActive), (0, _defineProperty2.default)(_classNames, motionName, typeof motionName === 'string'), _classNames)),
-          style: statusStyle
-        }), this.setNodeRef);
+    if (!children) {
+      // No children
+      motionChildren = null;
+    } else if (status === _interface.STATUS_NONE || !isSupportTransition(props)) {
+      // Stable children
+      if (visible) {
+        motionChildren = children((0, _objectSpread2.default)({}, eventProps), setNodeRef);
+      } else if (!removeOnLeave) {
+        motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, {
+          className: leavedClassName
+        }), setNodeRef);
+      } else {
+        motionChildren = null;
       }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, _ref) {
-        var prevProps = _ref.prevProps,
-            prevStatus = _ref.status;
-        if (!isSupportTransition(props)) return {};
-        var visible = props.visible,
-            motionAppear = props.motionAppear,
-            motionEnter = props.motionEnter,
-            motionLeave = props.motionLeave,
-            motionLeaveImmediately = props.motionLeaveImmediately;
-        var newState = {
-          prevProps: props
-        }; // Clean up status if prop set to false
+    } else {
+      var _classNames;
 
-        if (prevStatus === _interface.STATUS_APPEAR && !motionAppear || prevStatus === _interface.STATUS_ENTER && !motionEnter || prevStatus === _interface.STATUS_LEAVE && !motionLeave) {
-          newState.status = _interface.STATUS_NONE;
-          newState.statusActive = false;
-          newState.newStatus = false;
-        } // Appear
+      // In motion
+      var statusSuffix;
 
-
-        if (!prevProps && visible && motionAppear) {
-          newState.status = _interface.STATUS_APPEAR;
-          newState.statusActive = false;
-          newState.newStatus = true;
-        } // Enter
-
-
-        if (prevProps && !prevProps.visible && visible && motionEnter) {
-          newState.status = _interface.STATUS_ENTER;
-          newState.statusActive = false;
-          newState.newStatus = true;
-        } // Leave
-
-
-        if (prevProps && prevProps.visible && !visible && motionLeave || !prevProps && motionLeaveImmediately && !visible && motionLeave) {
-          newState.status = _interface.STATUS_LEAVE;
-          newState.statusActive = false;
-          newState.newStatus = true;
-        }
-
-        return newState;
+      if (statusStep === _interface.STEP_PREPARE) {
+        statusSuffix = 'prepare';
+      } else if ((0, _useStepQueue.isActive)(statusStep)) {
+        statusSuffix = 'active';
+      } else if (statusStep === _interface.STEP_START) {
+        statusSuffix = 'start';
       }
-    }]);
-    return CSSMotion;
-  }(React.Component);
 
-  CSSMotion.defaultProps = {
-    visible: true,
-    motionEnter: true,
-    motionAppear: true,
-    motionLeave: true,
-    removeOnLeave: true
-  };
+      motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, {
+        className: (0, _classnames.default)((0, _motion.getTransitionName)(motionName, status), (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _motion.getTransitionName)(motionName, "".concat(status, "-").concat(statusSuffix)), statusSuffix), (0, _defineProperty2.default)(_classNames, motionName, typeof motionName === 'string'), _classNames)),
+        style: statusStyle
+      }), setNodeRef);
+    }
 
-  if (!forwardRef) {
-    return CSSMotion;
-  }
-
-  return React.forwardRef(function (props, ref) {
-    return React.createElement(CSSMotion, Object.assign({
-      internalRef: ref
-    }, props));
+    return React.createElement(_DomWrapper.default, {
+      ref: wrapperNodeRef
+    }, motionChildren);
   });
+  CSSMotion.displayName = 'CSSMotion';
+  return CSSMotion;
 }
@@ -374,0 +142,0 @@

lib/CSSMotionList.d.ts

@@ -14,4 +14,6 @@ import * as React from 'react';
 }
-export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps>): React.ComponentClass<CSSMotionListProps>;
+export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps & {
+    ref?: React.Ref<any>;
+}>): React.ComponentClass<CSSMotionListProps>;
 declare const _default: React.ComponentClass<CSSMotionListProps, any>;
 export default _default;

lib/interface.d.ts

@@ -7,6 +7,13 @@ /// <reference types="react" />
 export declare type MotionStatus = typeof STATUS_NONE | typeof STATUS_APPEAR | typeof STATUS_ENTER | typeof STATUS_LEAVE;
+export declare const STEP_NONE: "none";
+export declare const STEP_PREPARE: "prepare";
+export declare const STEP_START: "start";
+export declare const STEP_ACTIVE: "active";
+export declare const STEP_ACTIVATED: "end";
+export declare type StepStatus = typeof STEP_NONE | typeof STEP_PREPARE | typeof STEP_START | typeof STEP_ACTIVE | typeof STEP_ACTIVATED;
 export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
     deadline?: boolean;
 };
+export declare type MotionPrepareEventHandler = (element: HTMLElement) => Promise<any>;
 export declare type MotionEventHandler = (element: HTMLElement, event: MotionEvent) => React.CSSProperties | void;
 export declare type MotionEndEventHandler = (element: HTMLElement, event: MotionEvent) => boolean | void;

lib/interface.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.STATUS_LEAVE = exports.STATUS_ENTER = exports.STATUS_APPEAR = exports.STATUS_NONE = void 0;
+exports.STEP_ACTIVATED = exports.STEP_ACTIVE = exports.STEP_START = exports.STEP_PREPARE = exports.STEP_NONE = exports.STATUS_LEAVE = exports.STATUS_ENTER = exports.STATUS_APPEAR = exports.STATUS_NONE = void 0;
 var STATUS_NONE = 'none';
@@ -15,2 +15,12 @@ exports.STATUS_NONE = STATUS_NONE;
 var STATUS_LEAVE = 'leave';
-exports.STATUS_LEAVE = STATUS_LEAVE;
+exports.STATUS_LEAVE = STATUS_LEAVE;
+var STEP_NONE = 'none';
+exports.STEP_NONE = STEP_NONE;
+var STEP_PREPARE = 'prepare';
+exports.STEP_PREPARE = STEP_PREPARE;
+var STEP_START = 'start';
+exports.STEP_START = STEP_START;
+var STEP_ACTIVE = 'active';
+exports.STEP_ACTIVE = STEP_ACTIVE;
+var STEP_ACTIVATED = 'end';
+exports.STEP_ACTIVATED = STEP_ACTIVATED;

lib/util/motion.d.ts

@@ -7,5 +7,5 @@ import { MotionName } from '../CSSMotion';
 export declare function getVendorPrefixedEventName(eventName: string): any;
+export declare const supportTransition: boolean;
 export declare const animationEndName: any;
 export declare const transitionEndName: any;
-export declare const supportTransition: boolean;
 export declare function getTransitionName(transitionName: MotionName, transitionType: string): any;

lib/util/motion.js

@@ -11,9 +11,10 @@ "use strict";
 exports.getTransitionName = getTransitionName;
-exports.supportTransition = exports.transitionEndName = exports.animationEndName = void 0;
+exports.transitionEndName = exports.animationEndName = exports.supportTransition = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); // ================= Transition =================
+var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
+
+// ================= Transition =================
 // Event wrapper. Copy from react source code
-
 function makePrefixMap(styleProp, eventName) {
@@ -48,6 +49,6 @@ var prefixes = {};
 
-var vendorPrefixes = getVendorPrefixes(canUseDOM, typeof window !== 'undefined' ? window : {});
+var vendorPrefixes = getVendorPrefixes((0, _canUseDom.default)(), typeof window !== 'undefined' ? window : {});
 var style = {};
 
-if (canUseDOM) {
+if ((0, _canUseDom.default)()) {
   var _document$createEleme = document.createElement('div');
@@ -84,8 +85,10 @@
 
-var animationEndName = getVendorPrefixedEventName('animationend');
+var internalAnimationEndName = getVendorPrefixedEventName('animationend');
+var internalTransitionEndName = getVendorPrefixedEventName('transitionend');
+var supportTransition = !!(internalAnimationEndName && internalTransitionEndName);
+exports.supportTransition = supportTransition;
+var animationEndName = internalAnimationEndName || 'animationend';
 exports.animationEndName = animationEndName;
-var transitionEndName = getVendorPrefixedEventName('transitionend');
+var transitionEndName = internalTransitionEndName || 'transitionend';
 exports.transitionEndName = transitionEndName;
-var supportTransition = !!(animationEndName && transitionEndName);
-exports.supportTransition = supportTransition;
 
@@ -92,0 +95,0 @@ function getTransitionName(transitionName, transitionType) {

package.json

 {
   "name": "rc-motion",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "React lifecycle controlled motion library",
@@ -46,4 +46,3 @@ "keywords": [
     "classnames": "^2.2.1",
-    "raf": "^3.4.1",
-    "rc-util": "^5.0.6"
+    "rc-util": "^5.2.1"
   },
@@ -54,3 +53,2 @@ "devDependencies": {
     "@types/jest": "^26.0.8",
-    "@types/raf": "^3.4.0",
     "@types/react": "^16.9.2",
@@ -65,6 +63,9 @@ "@types/react-dom": "^16.9.0",
     "father": "^2.13.4",
+    "jest": "^26.4.2",
     "less": "^3.10.3",
     "np": "^6.2.4",
+    "prettier": "^2.1.1",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "regenerator-runtime": "^0.13.7"
   },
@@ -71,0 +72,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

83895

increased by28.05%

Dependency count

5

decreased by-16.67%

Number of package files

54

increased by80%

Lines of code

1813

increased by26.52%

Worsened metrics

Dev dependency count

19

increased by11.76%

Dependency changes

• - Removedraf@^3.4.1

• - Removedperformance-now@2.1.0(transitive)

• - Removedraf@3.4.1(transitive)

• Updatedrc-util@^5.2.1