关于react transition动画className模块化命名动画不生效
来源:16-8 react-transition-group模块实现动画功能

weixin_慕仙3238841
2023-02-22
老师,麻烦问一下,我在react中使用动画,命名方式为scss的模块化定义命名,为什么动画不生效?改回之前的那种普通方式命名就会有效果,那如何才能在模块化命名下让动画生效呢?
写回答
2回答
-
你好,目前动画采用classNames来找指定的样式,这个并不是className,所以只能用于全局定义。
可以把只把动画都定义到全局样式中,其他样式可以做成模块化的。
00 -
慕姐8511489
2023-03-02
参考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>
112023-03-02
相似问题