React@16.x（35）动画（下）封装动画组件需要注意的问题

接上篇文章 React动画（中）

1，封装举例

封装一个渐入渐出效果的动画组件

import { CSSTransition } from "react-transition-group";
import "./FadeTransition.css";export default function FadeTransition(props) {return <CSSTransition {...props}>{props.children}</CSSTransition>;
}

/* FadeTransition.css */
.appear {opacity: 0;
}.appear-active {opacity: 1;transition: opacity 1s;
}.enter {opacity: 0;
}
.enter-active {opacity: 1;transition: opacity 1s;
}.exit-active {opacity: 0;transition: opacity 1s;
}.exit-done {opacity: 0;
}

使用：

import { useState } from "react";
import FadeTransition from "./FadeTransition";export default function App() {const [state, setState] = useState(true);return (<><button onClick={() => setState(!state)}>{state ? "隐藏" : "显示"}</button><FadeTransition in={state} appear timeout={1000}><h1>标题1</h1></FadeTransition></>);
}

2，问题

2.1，timeout

可以看到，传递的 timeout 需要和 css 中的过渡时间保持一致。

解决：将 css 文件中设置的 transition 属性都移除掉，通过内联样式设置。

内联样式通过钩子函数来设置：

import { CSSTransition } from "react-transition-group";
import "./FadeTransition.css";FadeTransition.defaultProps = {timeout: 500,
};const addTransition = (node, timeout) => {node.style.transition = `opacity ${timeout}ms`;
};const removeTransition = (node) => {node.style.transition = "";
};export default function FadeTransition(props) {return (<CSSTransition{...props}onEnter={(node) => addTransition(node, props.timeout)}onEntered={(node) => removeTransition(node)}onExit={(node) => addTransition(node, props.timeout)}onExited={(node) => removeTransition(node)}>{props.children}</CSSTransition>);
}

2.2，配合 SwitchTransition / TransitionGroup

SwitchTransition 组件会调用 CSSTransition 组件的 onExited 方法，让下个元素执行进入动画，所以需要执行传入的 props.onExited(node)。

其实，这几个动画组件在不同的动画状态，添加对应的类名，都是在这些钩子函数中实现的。

export default function FadeTransition(props) {return (<CSSTransition{...props}onEnter={(node) => addTransition(node, props.timeout)}onEntered={(node) => removeTransition(node)}onExit={(node) => addTransition(node, props.timeout)}onExited={(node) => {removeTransition(node);props.onExited && props.onExited(node);}}>{props.children}</CSSTransition>);
}

使用：

export default function App() {const [state, setState] = useState(true);return (<><button onClick={() => setState(!state)}>切换</button><SwitchTransition><FadeTransition key={state} appear timeout={1000}><h1>{state ? "标题1" : "标题2"}</h1></FadeTransition></SwitchTransition></>);
}

TransitionGroup 同理，不再赘述。

---

以上。