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>

要使过渡正常工作，它首先需要在 DOM 中使用初始 CSS 属性，当该属性被更改或覆盖时，它会触发您的过渡。在您的情况下，由于在段落之前有该条件，您基本上甚至不会渲染该段落。