2

I know I can use hoverOpenDelay={0} and hoverCloseDelay={0}, but there is still a 100ms opacity transition on the popover container that I'm unable to change, as far as I can tell. I would like to remove this transition so the popover appears instantly.

Thank you for your help!

Will
  • 41
  • 5

1 Answers1

2

This is quite hard. Blueprint uses the react-addons-css-transition-group library that adds -enter, -appear, -leave, -enter-active, -appear-active, -leave-active suffixes to some class names of elements that need to be animated. In your case you probably need to manually override the overlay styles e.g. something like this:

.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;
}

Of course, you'll want to narrow the scope of these rules to only to apply to popovers for which you want to remove animations.

If you want to see exactly what blueprint is doing to style the animation lifecycle classes, check out the styles here. The react-transition mixin is used here (among other places).

Michael Wu
  • 1,177
  • 1
  • 13
  • 34
  • Yeah, the problem is that setting the transition duration to 0ms, like you mentioned, causes problems with the popover reliably showing or hiding. This seems like a pretty poor way of handling things. Is there any way to just disable the react-addons-css-transition for this component or something? The 1ms delay is perceivable. – Will Aug 14 '17 at 22:04
  • Not that I'm aware of. And yes, `1ms` was good enough for me but there certainly is a frame or so of animation. The library is pretty ingrained into Blueprint but should be easy to expose a prop to users to disable animations on a per-component basis. This hasn't been a _huge_ issue yet for most users but I'd encourage you to file a ticket on the Github repo. – Michael Wu Aug 14 '17 at 22:07