feat(transition): ✨support custom class name and styles

huang-xiao-jian · Jun 23, 2020 · c6c59a6 · c6c59a6
1 parent a389a2d
commit c6c59a6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/packages/Transition/Transition.redux.ts b/packages/Transition/Transition.redux.ts
@@ -24,7 +24,7 @@ export interface TransitionState {
   // 转场 CSS 名称
   name: string;
   // 转场时间
-  duration: number;
+  duration: number | string;
   // 自定义样式覆盖
   className?: string;
   // 自定义样式覆盖
@@ -36,6 +36,9 @@ export interface TransitionAction {
   payload?: Partial<TransitionState>;
 }
 
+const stringifyDuration = (duration: number | string) =>
+  typeof duration === 'number' ? `${duration}ms` : duration;
+
 export const transitionReducer: Reducer<TransitionState, TransitionAction> = (
   state,
   action
@@ -58,11 +61,14 @@ export const transitionReducer: Reducer<TransitionState, TransitionAction> = (
         className: clsx(`${state.name}-enter`, `${state.name}-enter-active`),
         style: {
           display: 'block',
-          transitionDuration: `${state.duration}ms`,
+          transitionDuration: stringifyDuration(state.duration),
         },
       };
     case TransitionActionType.Entered:
-      return { ...state, className: clsx(`${state.name}-enter-done`) };
+      return {
+        ...state,
+        className: clsx(`${state.name}-enter-done`),
+      };
     case TransitionActionType.Leave:
       return {
         ...state,
@@ -72,7 +78,10 @@ export const transitionReducer: Reducer<TransitionState, TransitionAction> = (
       return {
         ...state,
         className: clsx(`${state.name}-leave`, `${state.name}-leave-active`),
-        style: { ...state.style, transitionDuration: `${state.duration}ms` },
+        style: {
+          ...state.style,
+          transitionDuration: stringifyDuration(state.duration),
+        },
       };
     case TransitionActionType.Left:
       return {

diff --git a/packages/Transition/Transition.tsx b/packages/Transition/Transition.tsx
@@ -20,7 +20,7 @@ interface NeutralTransitionProps {
   // 预设动画
   name: string;
   // 转场时间
-  duration: number;
+  duration: number | string;
 }
 
 interface ExogenousTransitionProps {
@@ -41,7 +41,7 @@ const DefaultTransitionProps: NeutralTransitionProps = {
 
 // TODO - appear transition not supported
 const Transition: FunctionComponent<TransitionProps> = (props) => {
-  const { className, visible, duration, name, children } = props;
+  const { className, visible, duration, name, style, children } = props;
   const [state, dispatch] = useReducer(transitionReducer, {
     name,
     duration,
@@ -52,6 +52,11 @@ const Transition: FunctionComponent<TransitionProps> = (props) => {
       display: visible ? '' : 'none',
     }),
   });
+  // 支持自定义 style 样式, className
+  const bindings = {
+    style: style ? { ...style, ...state.style } : state.style,
+    className: className ? `${state.className} ${className}` : state.className,
+  };
 
   // TODO - 事件触发不稳定，后续处理
   const onTransitionEnd = () => {
@@ -100,8 +105,8 @@ const Transition: FunctionComponent<TransitionProps> = (props) => {
 
   return (
     <View
-      style={state.style}
-      className={state.className}
+      style={bindings.style}
+      className={bindings.className}
       onTransitionEnd={onTransitionEnd}
     >
       {children}

diff --git a/storyboard/pages/transition/index.css b/storyboard/pages/transition/index.css
@@ -3,7 +3,13 @@
   transition-property: background-color, transform;
 }
 
-.dance-enter-active {
+.dance-enter,
+.dance-leave-active {
   background-color: red;
   transform: rotate(-360deg) translate3d(-100%, -100%, 0);
 }
+
+.dance-enter-active {
+  background-color: blueviolet;
+  transform: none;
+}