我一定错过了什么。我已经查找了如何执行此操作的各种示例,但我无法让我的示例工作。我只需要将一个元素转入或转出。
我正在调用 togglePopup()
来翻转状态中的 bool 值,这会正确显示/隐藏 div.popup-msg
但转换类不会被应用,并且,显然,该元素不会转入或转出。
编辑:我尝试将弹出窗口移动到其自己的组件中,认为问题可能在于它位于无状态功能组件内部,而不是直接位于 render()
中。还是没有运气。
togglePopup = () => {
let isPopupVisible = this.state.isPopupVisible;
isPopupVisible = !isPopupVisible;
this.setState({ isPopupVisible });
};
render() {
const Main = () => {
let removePopup = this.state.isPopupVisible
? <div key={1} className="popup-msg">List has Been Removed</div>
: null;
return (
<div className="main-wrapper">
<CSSTransitionGroup
transitionName="popup"
transitionEnterTimeout={700}
transitionLeaveTimeout={500}>
{removePopup}
</CSSTransitionGroup>
</div>
)
};
return (
<div className="app-wrapper">
<Route exact path="/" component={Main}/>
</div>
)
}
SASS:
.popup-enter {
transition: opacity 700ms ease-in;
opacity: 0.01;
&.popup-enter-active {
opacity: 1;
}
}
.popup-leave {
transition: opacity 500ms ease-in;
opacity: 1;
&.popup-leave-active {
opacity: 0.01;
}
}
最佳答案
好的,发现问题是由于弹出窗口位于另一个组件内造成的。所以我猜当状态更新时,父组件会重新渲染,并且不会显示任何过渡效果。不确定为什么会发生这种情况,因为没有影响父组件的状态更改。
将弹出窗口移到组件外部解决了该问题。
关于javascript - React CSSTransitionGroup 不应用类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46017717/