blueprintjs - 如何完全禁用弹出窗口的转换？

Question

我知道我可以使用 hoverOpenDelay={0} 和 hoverCloseDelay={0}，但我所在的弹出窗口容器上仍然存在 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 正在做什么来设置动画生命周期类的样式，请查看样式 here 。使用 react-transition mixin here (以及其他地方)。