feat: 增加cssTransition

packages/demo/src/components/Transition/demo/Base.tsx

@@ -1,4 +1,4 @@
-import { Transition } from 'pivot-design';
+import { Button, Transition } from 'pivot-design';
 import React, { useState } from 'react';
 
 import './index.scss';
@@ -19,7 +19,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <div style={{ color: 'black' }}>
+    <div>
       <Transition in={inProp} timeout={{ enter: 3000, exit: 3000, appear: 3000 }} appear={true}>
         {(state: any) => {
           return (
@@ -35,13 +35,13 @@ const App: React.FC = () => {
           );
         }}
       </Transition>
-      <button
+      <Button
         onClick={() => {
           setInProp((inProp) => !inProp);
         }}
       >
         {inProp ? '隐藏' : '展示'}
-      </button>
+      </Button>
     </div>
   );
 };

packages/demo/src/components/Transition/demo/CSSTransition.tsx

@@ -1,26 +1,54 @@
-import { CSSTransiton as MyCSSTransition } from 'pivot-design';
+import { Button, CSSTransiton } from 'pivot-design';
 import React, { useState } from 'react';
-
 import './index.scss';
-
-// const App: React.FC = () => {};
-
 const App: React.FC = () => {
-  const [inProp, setInProp] = useState(false);
+  const [showButton, setShowButton] = useState(true);
+  const [showMessage, setShowMessage] = useState(false);
   return (
     <>
-      <MyCSSTransition in={inProp} timeout={2000} classNames="my-node">
-        <div id="test">{"I'll receive my-node-* classes"}</div>
-      </MyCSSTransition>
-      <button type="button" onClick={() => setInProp(!inProp)}>
-        Click to Enter
-      </button>
+      {showButton && (
+        <Button onClick={() => setShowMessage(true)} size="middle">
+          点击展示
+        </Button>
+      )}
+      <CSSTransiton
+        in={showMessage}
+        timeout={500}
+        classNames="css-show-box"
+        unmountOnExit
+        onEnter={() => setShowButton(false)}
+        onExited={() => setShowButton(true)}
+      >
+        <div>
+          <text>出现的标题</text>
+          <p>文本内容在消失时会自动卸载，出现时挂载</p>
+          <Button onClick={() => setShowMessage(false)}>点击隐藏</Button>
+        </div>
+      </CSSTransiton>
     </>
   );
 };
-// 第一次点击按钮时 ，通过审查元素可以看到 div#test 标签的类名发生了变化，
-// 依次为 “my-node-enter”、“my-node-enter my-node-enter-active” >>>(2s later) “my-node-enter-done”
-
-// 第二次点击按钮时，通过审查元素可以看到 div#test 标签的类名发生了变化，
-// 依次为 “my-node-exit”、“my-node-exit my-node-exit-active” >>> (2s later)  “my-node-exit-done”
 export default App;
+
+/** css样式
+ .show-box {
+    opacity: 0;
+    &-enter {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    &-enter-active {
+      opacity: 1;
+      transform: translateX(0);
+      transition: opacity 500ms, transform 500ms;
+    }
+    &-exit {
+      opacity: 1;
+    }
+    &-exit-active {
+      opacity: 0;
+      transform: scale(0.9);
+      transition: opacity 500ms, transform 500ms;
+    }
+  }
+*/

packages/demo/src/components/Transition/demo/Callback.tsx

@@ -16,7 +16,7 @@ const App: React.FC = () => {
     exited: { opacity: 0 },
   };
   return (
-    <div style={{ color: 'black' }}>
+    <div>
       <Transition
         in={inProp}
         timeout={duration}

packages/demo/src/components/Transition/demo/UnAnimation.tsx

@@ -16,7 +16,7 @@ const App: React.FC = () => {
     exited: { opacity: 0, transition: `opacity ${duration}ms` },
   };
   return (
-    <div style={{ color: 'black' }}>
+    <div>
       <Transition in={inProp} timeout={duration} enterAnimation={false}>
         {(state: any) => {
           return (

packages/demo/src/components/Transition/demo/Unmount.tsx

@@ -19,7 +19,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <div style={{ color: 'black' }}>
+    <div>
       <Transition in={inProp} timeout={duration} unmountOnExit={true} mountOnEnter={true}>
         {(state: any) => {
           return (

packages/demo/src/components/Transition/demo/index.scss

@@ -1,13 +1,26 @@
 @import '../../common.scss';
 
-button {
-  margin: 20px;
-  padding: 3px 15px;
-  background-color: #fff;
-  border: 1px solid black;
-  border-radius: 5px;
-  cursor: pointer;
-}
 .show-box {
   height: 20px;
 }
+
+.css-show-box {
+  opacity: 0;
+  &-enter {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  &-enter-active {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 500ms, transform 500ms;
+  }
+  &-exit {
+    opacity: 1;
+  }
+  &-exit-active {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 500ms, transform 500ms;
+  }
+}

packages/demo/src/components/Transition/index.mdx

@@ -1,5 +1,5 @@
 # Popover
-<div className="title">css</div>
+<div className="title">CSSTransition使用</div>
 <CodeBlock line={'5-7'}>
   <CSSTransition />
 </CodeBlock>

packages/demo/src/pages/component/index.tsx

@@ -22,7 +22,7 @@ import { list as TransitionList } from '../../components/Transition/.catalog';
 import './index.scss';
 
 function Index() {
-  const [select, setSelect] = useState('Switch');
+  const [select, setSelect] = useState('Transition');
   const demoSelect = () => {
     return (
       <div className="demo-container">

packages/design-props/components/transition.ts

@@ -4,16 +4,17 @@ import React from 'react';
 export type timeoutType = number | { enter?: number, exit?: number, appear?: number };
 
 export interface TransitionPropTypes {
+  /**
+   * @version 1.0.0
+   * @description 动画绑定的元素
+   */
+  nodeRef?: React.RefObject<HTMLElement | null>;
   /**
    * @version 1.0.0
    * @description 用来控制进场、出场状态切换
    * @default true
    */
   in?: boolean;
-  /**
-   *  子组件，是一个函数或者ReactNode，
-   *  如果为函数时其接受参数为刚刚介绍到的entering、entered 、exiting、exited 四个状态值
-   */
   /**
    * @version 1.0.0
    * @description 子组件，是一个函数或者ReactNode，如果为函数时其接受参数为entering、entered 、exiting、exited
@@ -57,37 +58,51 @@ export interface TransitionPropTypes {
   /**
    * @version 1.0.0
    * @description 进场动画执行前调用回调函数
-   * @default () => {}
    */
-  onEnter?: (node?: Element | null, isAppearing?: boolean) => void;
+  onEnter?: (node?: HTMLElement | null, isAppearing?: boolean) => void;
   /**
    * @version 1.0.0
    * @description 进场动画执行中调用
-   * @default () => {}
    */
-  onEntering?: (node?: Element | null, isAppearing?: boolean) => void;
+  onEntering?: (node?: HTMLElement | null, isAppearing?: boolean) => void;
   /**
    * @version 1.0.0
    * @description 进场动画执行完毕调用
-   * @default () => {}
    */
-  onEntered?: (node?: Element | null, isAppearing?: boolean) => void;
+  onEntered?: (node?: HTMLElement | null, isAppearing?: boolean) => void;
   /**
    * @version 1.0.0
    * @description 退场动画开始执行时调用
-   * @default () => {}
    */
-  onExit?: (node?: Element | null) => void;
+  onExit?: (node?: HTMLElement | null) => void;
   /**
    * @version 1.0.0
    * @description 退场动画执行中时调用
-   * @default () => {}
    */
-  onExiting?: (node?: Element | null) => void;
+  onExiting?: (node?: HTMLElement | null) => void;
   /**
    * @version 1.0.0
    * @description 退场动画执行完毕调用
-   * @default () => {}
    */
-  onExited?: (node?: Element | null) => void;
+  onExited?: (node?: HTMLElement | null) => void;
+}
+
+export interface CSSTransitionPropsTypes extends TransitionPropTypes {
+  /**
+   * @version 1.0.0
+   * @description class类型，可以传入对应的class类名，在元素不同阶段会自动变更
+   */
+  classNames?:
+    | string
+    | {
+        appear?: string,
+        appearActive?: string,
+        appearDone?: string,
+        enter?: string,
+        enterActive?: string,
+        enterDone?: string,
+        exit?: string,
+        exitActive?: string,
+        exitDone?: string,
+      };
 }