我正在尝试在我的项目中实现 CSSTransition 到模式。问题是我正在使用 css 模块。
我的模态的渲染方法
render() {
return (
<Aux>
<Backdrop
show={this.props.show}
clicked={this.props.modalClosed}/>
<CSSTransition
in={this.props.show}
timeout={1000}
mountOnEnter
unmountOnExit
classNames={?}
>
<div
className={classes.Modal}
>
{this.props.children}
</div>
</CSSTransition>
</Aux>
)
}
我的 Modal.css
.fade-enter {
}
.fade-enter-active {
animation:openModal 0.4s ease-out forwards;
}
.fade-exit{
}
.fade-exit-active{
animation: closeModal 0.4s ease-out forwards;
}
我应该将什么传递给 CSSTransition 组件中的 classNames 属性才能使其正常工作？
JSX:
<CSSTransition in={focused} timeout={500} classNames={{
enterActive: styles.MyClassEnterActive,
enterDone: styles.MyClassEnterDone,
exitActive: styles.MyClassExit,
exitDone: styles.MyClassExitActive
}}>
<span className={styles.MyClass}>animated</span>
</CSSTransition>
CSS 模块：
.MyClass {
position: absolute;
left: 5px;
}
.MyClassEnterActive {
left: 15px;
transition: left 500ms;
}
.MyClassEnterDone {
left: 15px;
}
.MyClassExit {
left: 15px;
}
.MyClassExitActive {
left: 5px;
transition: left 500ms;
}
Gracias Lionel!
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
