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

来源:16-8 react-transition-group模块实现动画功能

weixin_慕仙3238841

2023-02-22

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

2回答

西门老舅

2023-02-22

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

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

0
0

慕姐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>


1
1
西门老舅
这倒是一个方法,确实可以写一个对象上去,感谢提供的方案。
2023-03-02
共1条回复

Vue3 + React18 + TS4入门到实战 系统学习3大热门技术

专为初级前端人员设计,系统性学习三大技术

261 学习 · 182 问题

查看课程