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

Posted 2023-03-06

【中文标题】CSSTransition transition-enter-active 事件未按预期工作

【英文标题】：CSSTransition transition-enter-active event not working as expected

【发布时间】：2020-09-05 06:49:17

【问题描述】：

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

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

但是，在玩弄它的同时，我设法让一些功能使用这些事件工作： *-输入-完成， *-退出-完成

但是，我无法让它用于滑入/滑出过渡。

这让我很困惑，所以希望你能指出我正确的方向。几个代码sn-ps： 应用.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;

【问题讨论】：

过渡应该始终在元素上，不仅在动画时

您能再解释一下吗？我应该做出什么改变？谢谢！

类似的东西.mainclass transition: opacity 200ms; .slide-transition-enter opacity: 0; .slide-transition-enter-active opacity: 1; .slide-transition-exit opacity: 1; .slide-transition-exit-active opacity: 0; 你可以在这里阅读更多信息w3schools.com/css/css3_transitions.asp

我刚刚尝试过，但它似乎仍然没有任何区别？也许我是误会了？我已经查看了该链接，但仍然无法理解该问题。它也没有谈论我认为是这里的问题的 CSSTransition 方法。

是的，但还要在静态类上添加一个过渡，该类始终保留在元素类列表中，我将该类称为 mainClass 用于示例

【参考方案1】：

您在 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;

【讨论】：

有时是最简单的事情！我显然无法阅读样板。感谢您的帮助！