如何完全禁用popover的转换？

Question

我知道我可以使用hoverOpenDelay={0}和hoverCloseDelay={0}，但据我所知，popover容器上还有100毫秒的不透明度转换，我无法更改。我想删除此转换，以便立即显示弹出窗口。

感谢您的帮助！

Answer 1

这很难。蓝图使用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（以及其他地方）。