我怎样才能完全禁用popover的转换?
问题描述:
我知道我可以使用hoverOpenDelay={0}
和hoverCloseDelay={0}
,但就我所知,popover容器仍然有100ms的不透明度过渡,我无法改变。我想删除此转换,以便弹出窗口立即显示。我怎样才能完全禁用popover的转换?
谢谢你的帮助!
答
这很难。 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;
}
当然,你要缩小这些规则只范围适用于您要删除的动画popovers。
如果您想查看blueprint
正在做什么来设置动画生命周期类的样式,请检查样式here。 react-transition
mixin使用here(以及其他地方)。
是的,问题是将转换持续时间设置为0ms,就像您提到的那样,导致popover可靠地显示或隐藏。这似乎是处理事情的一个非常糟糕的方式。有没有什么办法可以禁用这个组件的react-addons-css-transition? 1ms的延迟是可感知的。 – Will
不是我所知道的。是的,“1ms”对我来说已经足够好了,但是肯定有一个动画框架。该库相当根深蒂固到Blueprint中,但应该很容易向用户公开一个道具以禁用每个组件的动画。对于大多数用户来说,这还不是一个大问题,但我鼓励你在Github回购站上提交一张票。 –