CSSTransition transition-enter-active 事件未按预期工作

Question

我是 JS、React 和 CSSTransition 的新手，所以如果有任何明显的问题，请原谅。我正在尝试为 div 输入一些基本的 enter/exit 动画（理想情况下从右滑入并向左滑出，但现在只是尝试使用不透明度以保持简单）。

虽然我可以让页面呈现，但我无法让以下 CSS 事件起作用： *-过渡输入， *-transition-enter-active, *-过渡出口， *-transition-exit-active

然而，在使用它的同时，我已经设法使用事件获得一些功能： *-输入完成， *-退出完成

但是，我无法让它为幻灯片 in/out 过渡工作。

这让我很困惑，所以希望你能给我指出正确的方向。一些代码片段： App.js

  switch = () => {
  this.setState(prevState => ({
    slide: !prevState.slide
  }));

  render() {
    return (
    <button type="button" onClick={this.switch}> Click </button>

    <CSSTransition
      in={this.state.slide}
      classNames='slide'
    >
       <div>
          <p>Text here</p>
       </div>
    </CSSTransition>
)

还有我的 App.css

.slide-transition-enter{
opacity: 0;
}

.slide-transition-enter-active{
  opacity: 1;
  transition: opacity 200ms;
}

.slide-transition-exit{
  opacity: 1;
}

.slide-transition-exit-active{
  opacity: 0;
  transition: opacity 200ms;
}

Answer 1

您在 CSS 中使用了错误的 class 名称，我已将其修复此外，您应该增加代码中的超时时间以使其更流畅

.test{
  transition: opacity 1000ms;
}

/* This fires as soon as the element enters the DOM */
.slide-enter{
opacity: 0;
}

/* This is where we can add the transition*/
.slide-enter-active{
  opacity: 1;

}

/* This fires as soon as the this.state.showList is false */
.slide-exit{
  opacity: 1;
}
/* fires as element leaves the DOM*/
.slide-exit-active{
  opacity: 0;
}

CSSTransition transition-enter-active 事件未按预期工作

CSSTransition transition-enter-active event not working as expected

javascript

css

css-transitions

reactjs