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>
  );
}

该段落具有名为“文本”的类，并且如果单击其父组件中的按钮，则有条件地添加第二个类。文本正在切换，检查器显示这两个类（“文本”和“可见”）都已添加到元素，但是没有过渡效果。这是我的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中，并且当该属性被更改或覆盖时，它会触发您的转换。在您的情况下，由于在段落之前设置了条件，因此您甚至根本不会呈现该段落。

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

1 个答案: