feat: Add prepare step (#6)

* Revert "revert: Back to sync (#5)"

This reverts commit 609271b.

* feat: init onXXXPrepare api

* add step hook

* frame steps

* active is last step

* adjust step hooks

* basic steps

* use step map

* motion end events

* basic repeat

* fix ssr issue

* rm async

* update test case

* fix test

* inject prepare

* more status class

* default prevent trantiong

* only promise should use async

* fix motion test case

* test coverage

* fix ts

Author: zombieJ

.eslintrc.js

@@ -10,5 +10,6 @@ module.exports = {
     'react/no-find-dom-node': 0,
     'jsx-a11y/label-has-for': 0,
     'jsx-a11y/label-has-associated-control': 0,
+    'default-case': 0,
   },
 };

examples/CSSMotion.less

@@ -16,7 +16,8 @@
 }
 
 .transition {
-  transition: background .3s, height 1.3s, opacity 1.3s;
+  transition: background 0.3s, height 1.3s, opacity 1.3s;
+  // transition: all 5s!important;
 
   &.transition-appear,
   &.transition-enter {
@@ -64,7 +65,7 @@
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 @keyframes enter {
@@ -87,4 +88,4 @@
     transform: scale(0);
     opacity: 0;
   }
-}
+}

examples/CSSMotion.tsx

@@ -8,6 +8,13 @@ interface DemoState {
   motionLeaveImmediately: boolean;
   removeOnLeave: boolean;
   hasMotionClassName: boolean;
+  prepare: boolean;
+}
+
+async function forceDelay(): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 2000);
+  });
 }
 
 class Demo extends React.Component<{}, DemoState> {
@@ -16,12 +23,17 @@ class Demo extends React.Component<{}, DemoState> {
     motionLeaveImmediately: false,
     removeOnLeave: true,
     hasMotionClassName: true,
+    prepare: false,
   };
 
   onTrigger = () => {
     this.setState(({ show }) => ({ show: !show }));
   };
 
+  onTriggerDelay = () => {
+    this.setState(({ prepare }) => ({ prepare: !prepare }));
+  };
+
   onRemoveOnLeave = () => {
     this.setState(({ removeOnLeave }) => ({ removeOnLeave: !removeOnLeave }));
   };
@@ -32,7 +44,9 @@ class Demo extends React.Component<{}, DemoState> {
     }));
   };
 
-  onCollapse = () => ({ height: 0 });
+  onCollapse = () => {
+    return { height: 0 };
+  };
 
   onMotionLeaveImmediately = () => {
     this.setState(({ motionLeaveImmediately }) => ({
@@ -59,6 +73,7 @@ class Demo extends React.Component<{}, DemoState> {
       motionLeaveImmediately,
       removeOnLeave,
       hasMotionClassName,
+      prepare,
     } = this.state;
 
     return (
@@ -87,6 +102,15 @@ class Demo extends React.Component<{}, DemoState> {
           {removeOnLeave ? '' : ' (use leavedClassName)'}
         </label>
 
+        <label>
+          <input
+            type="checkbox"
+            onChange={this.onTriggerDelay}
+            checked={prepare}
+          />{' '}
+          prepare before motion
+        </label>
+
         <div className="grid">
           <div>
             <h2>With Transition Class</h2>
@@ -95,6 +119,8 @@ class Demo extends React.Component<{}, DemoState> {
               motionName={hasMotionClassName ? 'transition' : null}
               removeOnLeave={removeOnLeave}
               leavedClassName="hidden"
+              onAppearPrepare={prepare && forceDelay}
+              onEnterPrepare={prepare && forceDelay}
               onAppearStart={this.onCollapse}
               onEnterStart={this.onCollapse}
               onLeaveActive={this.onCollapse}

examples/SSR.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { hydrate } from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+import classNames from 'classnames';
+import { genCSSMotion } from '../src/CSSMotion';
+import CSSMotion from '../src';
+import './CSSMotion.less';
+
+const ServerCSSMotion = genCSSMotion(false);
+
+const onCollapse = () => ({ height: 0 });
+
+interface MotionAppearProps {
+  supportMotion: boolean;
+}
+
+const MotionAppear = ({ supportMotion }: MotionAppearProps) => {
+  const Component = supportMotion ? CSSMotion : ServerCSSMotion;
+
+  return (
+    <Component
+      motionName="transition"
+      leavedClassName="hidden"
+      motionAppear
+      onAppearStart={onCollapse}
+    >
+      {({ style, className }, ref) => (
+        <div
+          ref={ref}
+          className={classNames('demo-block', className)}
+          style={style}
+        />
+      )}
+    </Component>
+  );
+};
+
+const Demo = () => {
+  const ssr = ReactDOMServer.renderToString(
+    <MotionAppear supportMotion={false} />,
+  );
+
+  React.useEffect(() => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    div.innerHTML = ssr;
+
+    hydrate(<MotionAppear supportMotion />, div);
+
+    return () => {
+      document.body.removeChild(div);
+    };
+  }, []);
+
+  return (
+    <div>
+      <textarea value={ssr} style={{ width: '100%' }} rows={5} readOnly />
+    </div>
+  );
+};
+
+export default Demo;

package.json

@@ -43,14 +43,12 @@
   "dependencies": {
     "@babel/runtime": "^7.11.1",
     "classnames": "^2.2.1",
-    "raf": "^3.4.1",
-    "rc-util": "^5.0.6"
+    "rc-util": "^5.2.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^26.0.8",
-    "@types/raf": "^3.4.0",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@umijs/fabric": "^2.0.8",
@@ -60,10 +58,13 @@
     "enzyme-to-json": "^3.4.0",
     "eslint": "^7.0.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"
   },
   "peerDependencies": {
     "react": "^16.0.0",