React 中的 CSS 过渡 - 用户单击按钮时文本淡入淡出

Question

我有以下展示组件：

const HowToControls = props => {
  return (
    <div className="col-md-6 how-to">
      {props.isOpen ?
        <p className={`text ${props.isOpen ? 'visible' : ''}`}>
         lorem ipsum............
        </p>/>
        : null}
    </div>
  );
}

段落具有名为“text”的类，如果单击其父组件中的按钮，则有条件地添加第二个类。文本正在切换，检查器显示两个类（“文本”和“可见”）都添加到元素中，但没有过渡效果。这是我的 CSS：

.text {
  opacity: 0.01;
  transition: opacity 600ms;
}

.text.visible {
  opacity: 1;
}

我猜这两个类都是在页面加载时添加的（在组件安装之前）。那是对的吗？任何帮助将不胜感激。

Answer 1

在段落之前有 if 语句 props.isOpen。所以从技术上讲，班级变化并不重要。基于props.isOpen，它要么显示启用可见类的段落，要么显示null。 试试这个：

<div className="col-md-6 how-to">
    <p className={`text ${props.isOpen ? 'visible' : ''}`}>
     lorem ipsum............
    </p>/>
</div>

要使过渡生效，它首先需要在具有初始 CSS 属性的 DOM 中，当该属性被更改或覆盖时，它会触发您的过渡。在你的情况下，你基本上甚至没有渲染段落，因为在段落之前有那个条件。