javascript - transitionEnterTimeout/transitionLeaveTimeout 在 React 中实际上做了什么？

Question

在 React 中为元素设置动画时，我们可以使用如下代码片段:

      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>

连同赞美的 CSS 动画。

我已阅读文档(可在此处找到:https://facebook.github.io/react/docs/animation.html)but 我不是 100% 确定这两个超时属性的实际作用？我会冒险猜测并说如果动画没有完成，它们是后备？

这些值应该匹配 css 输入/输出持续时间值，还是应该大于动画值？

.example-enter {
  opacity: 0.01;
}

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

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Answer 1

它们指示关联的 CSS 转换需要多长时间才能完成。您应该将这些值设置为您在 CSS 类中用于过渡属性的相同值。

ReactCSSTransitionGroup 然后使用它来确定何时应该考虑添加和删除的元素，以便它可以采取正确的操作。它曾经通过监听回调来做到这一点，然而，事实证明这真的不可靠，因为有很多回调从未被调用过的实例。例如，这将导致元素在过渡结束后永远不会被删除。