CSSTransition过渡输入活动事件未按预期工作

Posted 2023-02-01

我是JS，React和CSSTransition的新手，因此，如果其中任何一项显而易见，请原谅。我正在尝试为div输入一些基本的进入/退出动画（理想情况是从右滑入并向左滑出，但现在只是尝试使用不透明度来保持简单）。

虽然我可以渲染页面，但以下CSS事件却无法正常工作：*-转换输入* -transition-enter-active，*-过渡退出，* -transition-exit-active

但是，在使用它的同时，我设法通过事件使一些功能起作用：*-完成*-退出完成

但是，然后我无法使它在幻灯片的滑入/滑出过渡中工作。

这让我感到困惑，希望您能指出正确的方向。一些代码片段：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;

答案

您在CSS中使用了错误的类名，因此我对其进行了修复另外，您还应该增加代码中的超时，以使其更加流畅

.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;