因此,我尝试根据用户单击的按钮淡入和淡出一组输入。我试过使用jQuery,但是,div以同样的速度淡入和淡出……
我使用的是es6类和react。
我想要的是用户按下一个按钮和输入fadeIn。另一个按钮是inputs 。我不介意使用jQuery,但我想了解如何使用react来做到这一点。
renderInputs() {
if (this.state.addType === "image") {
return (
<div className="addContainer">
<input type="text" className="form-control" />
</div>
)
} else {
return (
other inputs
)
}
}
render() {
return (
<CSSTransitionGroup
transitionName="fadeInput"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{this.renderInputs()} // this doesn't work but I want this content to be conditional.
</CSSTransitionGroup>
)
}
// SCSS
.fadeInput-enter {
opacity: 0.01;
}
.fadeInput-enter.fadeInput-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fadeInput-leave {
opacity: 1;
}
.fadeInput-leave.fadeInput-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
https://stackoverflow.com/questions/43702454
复制相似问题