github:[https://github.com/reactjs/react-transition-group](https://github.com/reactjs/react-transition-group) 直接看官網示例： ~~~jsx function App() { const [inProp, setInProp] = useState(false); return ( <div> <CSSTransition in={inProp} timeout={200} classNames="my-node"> <div> {"I'll receive my-node-* classes"} </div> </CSSTransition> <button type="button" onClick={() => setInProp(true)}> Click to Enter </button> </div> ); } ~~~ ~~~css .my-node-enter { opacity: 0; } .my-node-enter-active { opacity: 1; transition: opacity 200ms; } .my-node-exit { opacity: 1; } .my-node-exit-active { opacity: 0; transition: opacity 200ms; } ~~~ `CSSTransition`applies a pair of class names during the`appear`,`enter`, and`exit`states of the transition. The first class is applied and then a second`*-active`class in order to activate the CSS transition. After the transition, matching`*-done`class names are applied to persist the transition state. 三個階段：appear，enter，exit 會分別添加對應的類名到對應的 DOM 元素上（以觸發過渡效果） When the`in`prop is set to`true`, the child component will first receive the class`example-enter`, then the`example-enter-active`will be added in the next tick.`CSSTransition`[forces a reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)between before adding the`example-enter-active`. This is an important trick because it allows us to transition between`example-enter`and`example-enter-active`even though they were added immediately one after another. Most notably, this is what makes it possible for us to animate*appearance*. 簡單理解：`in`這個屬性為 true 時 / 變化時，子組件會觸發動畫效果（相當于 vue 的 v-if ？ ）