blueprintjs - 如何完全禁用弹出框的过渡？

Question

我知道我可以使用hoverOpenDelay={0}and hoverCloseDelay={0}，但据我所知，popover 容器上仍有 100 毫秒的不透明度过渡，我无法更改。我想删除此过渡，以便弹出框立即出现。

谢谢您的帮助！

Answer 1

这是相当困难的。Blueprint 使用的react-addons-css-transition-group库为一些需要动画的元素的类名添加-enter, -appear, -leave, -enter-active, -appear-active,后缀。-leave-active在您的情况下，您可能需要手动覆盖覆盖样式，例如：

.pt-overlay-enter,
.pt-overlay-appear {
  opacity: 0;
}

.pt-overlay-enter-active,
.pt-overlay-appear-active {
  opacity: 1;
  transition-property: opacity;
  // `step` didn't work cross browser for me
  transition-timing-function: ease; 
  // i've found 0ms is causes react-addons-css-transition-group to fire events unreliable on certain browsers
  transition-duration: 1ms
  transition-delay: 0;
}

当然，您需要将这些规则的范围缩小到仅适用于您想要删除动画的弹出框。

如果您想确切了解blueprint动画生命周期类的样式，请在此处查看样式。这里（以及其他地方）使用了react-transitionmixin 。