关于react transition动画className模块化命名动画不生效

Question

老师，麻烦问一下，我在react中使用动画，命名方式为scss的模块化定义命名，为什么动画不生效?改回之前的那种普通方式命名就会有效果，那如何才能在模块化命名下让动画生效呢?

Answer 1

西门老舅 2023-02-22 16:07:55

你好，目前动画采用classNames来找指定的样式，这个并不是className，所以只能用于全局定义。

可以把只把动画都定义到全局样式中，其他样式可以做成模块化的。

Answer 2

慕姐8511489 2023-03-02 16:34:13

参考https://stackoverflow.com/questions/53912256/react-csstransition-with-css-modules

试了试是可以的。

<CSSTransition nodeRef={nodeRef} in={inProp} timeout={1000} classNames={{
enter: style.FadeEnter,
enterActive: style.FadeEnterActive,
enterDone: style.FadeEnterDone,
exitActive: style.FadeExitActive,
exitDone: style.FadeExitDone,
exit: style.FadeExit,
appear: style.FadeAppear,
appearActive: style.FadeAppearActive,
appearDone: style.FadeAppearDone,
}} unmountOnExit>
<div ref={nodeRef} className={style.box}></div>
</CSSTransition>

• 西门老舅 #1

  这倒是一个方法，确实可以写一个对象上去，感谢提供的方案。