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)但我不是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使用它来确定何时应该考虑添加和删除的元素,以便它可以采取正确的操作.它曾经通过监听回调来做到这一点,然而,事实证明这实际上是不可靠的,因为有很多实例从未调用过回调.例如,这将导致在转换结束后永远不会删除元素.