关于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

试了试是可以的。

1 2 3 4 5 6 7 8 9 10 11 12 13

<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

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