在 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;
}
最佳答案
它们指示关联的 CSS 转换需要多长时间才能完成。您应该将这些值设置为您在 CSS 类中用于过渡属性的相同值。
ReactCSSTransitionGroup 然后使用它来确定何时应该考虑添加和删除的元素,以便它可以采取正确的操作。它曾经通过监听回调来做到这一点,然而,事实证明这真的不可靠,因为有很多回调从未被调用过的实例。例如,这将导致元素在过渡结束后永远不会被删除。
关于javascript - transitionEnterTimeout/transitionLeaveTimeout 在 React 中实际上做了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35570551/