fix(Transition): 针对style属性层级问题进行修复

79E · Dec 1, 2022 · a50b794 · a50b794
1 parent 0653e8e
commit a50b794
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/components/transition/README.md b/src/components/transition/README.md
@@ -22,9 +22,11 @@
 
 ### transitionStyles 属性
 
+> 💡**注意：如果为`React`组件如 `<Card />` 则内部必须要接收`style`属性，并设置在需要的位置上。**
+
 `transitionStyles` 属性为设置动画时机所展示的CSS样式
 
-以上面的演示代码为例，Less 样式代码为：
+以上面的演示代码为例，动画样式代码为：
 
 ```js
 const transitionStyles = {

diff --git a/src/components/transition/transition.tsx b/src/components/transition/transition.tsx
@@ -43,15 +43,18 @@ export const Transition: FunctionComponent<TransitionProps> = props => {
  unmountOnExit={unmountOnExit}
  {...rest}
  >
- {state => (
- <div
- style={{
- ...varTransitionStyles[state],
- }}
- >
- {children}
- </div>
- )}
+ {state =>
+ React.Children.map(children, chil => {
+ if (!React.isValidElement(chil))
+ return <span style={varTransitionStyles[state]}>{chil}</span>;
+ return React.cloneElement(chil as React.ReactElement, {
+ style: {
+ ...chil.props.style,
+ ...varTransitionStyles[state],
+ },
+ });
+ })
+ }
  </ReactTransition>
  );
 };