CSSTransition过渡输入活动事件未按预期工作 [英] CSSTransition transition-enter-active event not working as expected

问题描述

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

I'm new to JS, React and CSSTransition so please excuse me if any of this is obvious. I'm trying to enter some basic enter/exit animations for a div (ideally slide in from right and slide out to left, but just trying to use opacity for now to keep it simple).

尽管我可以呈现页面，但以下CSS事件却无法正常工作:*-转换输入* -transition-enter-active，*-过渡退出，* -transition-exit-active

While I can get the page to render, I can't get and of the following CSS events to work: *-transition-enter, *-transition-enter-active, *-transition-exit, *-transition-exit-active

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

However, whilst playing around with it I have managed to get some functionality working using the events: *-enter-done, *-exit-done

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

However, I then can't get it to work for a slide in/out transition.

这让我感到困惑，因此希望您能指出正确的方向.一些代码片段:App.js

This has perplexed me, so hoping you can point me in the right direction. A few code snippets: 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

And the my 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中使用了错误的类名，此处已对其进行了修复另外，您还应该增加代码中的超时时间，以使其更加流畅

You used the wrong class names in your CSS here I fixed it Also you should increse the timeout in your code to make it more smooth

.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过渡输入活动事件未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！