在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 in / out持续时间值，还是应该大于动画值？
.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;
}
它们指示相关的CSS转换完成所需的时间。您应该将这些值设置为与CSS类中用于transition属性的值相同。
然后ReactCSSTransitionGroup使用它来确定何时应该考虑添加和删除的元素，以便可以采取正确的措施。它过去常常通过侦听回调来实现，但是事实证明，这确实是不可靠的，因为在很多情况下从未调用过回调。例如，这将导致元素永远不会在转换结束后被删除。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句