React CSS转换在退出或进入时不起作用答案

【问题标题】：React CSS Transition Not Working On Exit Or EnterReact CSS转换在退出或进入时不起作用
【发布时间】：2021-09-26 19:54:55
【问题描述】：

这是在我的组件文件中

     <CSSTransition
        classNames="method"
        in={radio === 'add-card'}
        exit={radio !== 'add-card'}
        timeout={500}
        unmountOnExit>
        <div className=" ">
          Hello
        </div>
</CSSTransition>

这是我的css文件

.method-enter {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.method-enter-active {
  opacity: 1;
}

.method-exit {
  opacity: 1;
  transition: opacity 500ms ease-out;
}

.method-exit-active {
  opacity: 0;
}

我的 CSSTransition 应该在开始时处于非活动状态。当我将条件设置为 true 时，没有淡入动画。它只是立即出现。将条件设置为 false 会使过渡在 500 毫秒后消失，而不是淡出。

我的 CSS 有问题吗？我的目标是让进入和退出有 500 毫秒的淡入和淡出。

【问题讨论】：

标签： css reactjs react-transition-group

【解决方案1】：

在docs 中指定将转换应用于活动类。将您的 transition 属性移动到 .method-enter-active 和 .method-exit-active。

像这样：

.method-enter {
  opacity: 0;
}

.method-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.method-exit {
  opacity: 1;
}

.method-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

此外，根据您在div 元素上设置样式的方式，您可能需要指定进入或退出的结束状态。无论如何，我个人总是添加它们。因此，您还需要添加以下内容：

.method-enter-done {
  opacity: 1;
}

.method-exit-done {
  opacity: 0;
}

【讨论】：