[Bug] Overlay2 content does not animate - only backdrop has CSS transitions

[mm-wang]

Code Sandbox

Link to a minimal repro: https://codesandbox.io/p/devbox/serene-visvesvaraya-k73346

Steps to reproduce

1. Create an Overlay2 with custom content (not using Dialog or Drawer)
2. Open the overlay and observe the enter animation
3. Close the overlay and observe the exit animation
4. Notice the backdrop fades smoothly but the content does not animate

Actual behavior

• Backdrop: Fades smoothly (opacity 0 → 1 on open, 1 → 0 on close)
• Content: Stays fully opaque throughout, then suddenly disappears when the transition timeout
  completes

This creates a jarring visual where the backdrop fades out while the content remains fully visible,
until the content abruptly vanishes.

Expected behavior

Both the backdrop AND the content should animate (fade in/out) together when the overlay opens and
closes.

Possible solution

The root cause is that Overlay2 wraps both backdrop and content in separate CSSTransition
components, but only the backdrop has CSS transition rules defined in _overlay.scss. The
content wrapper (.bp6-overlay-content) has no transitions.

In _overlay.scss:

// Backdrop - HAS transitions (lines 75-84)
.#{$ns}-overlay-backdrop {
  @include react-transition(
    "#{$ns}-overlay",
    (opacity: 0 1),
    $pt-transition-duration * 2,
    $before: "&"
  );
}

// Content - NO transitions (lines 61-72)
.#{$ns}-overlay-content {
  position: fixed;
  z-index: $pt-z-index-overlay;
  // Missing: @include react-transition(...)
}

Proposed fix - Add transitions to .bp6-overlay-content:

.#{$ns}-overlay-content {
  @include react-transition(
    "#{$ns}-overlay",
    (opacity: 0 1),
    $pt-transition-duration * 2,
    $before: "&"
  );
  position: fixed;
  z-index: $pt-z-index-overlay;
  // ... existing styles
}

Workaround: transitionDuration={0} disables CSSTransition entirely (but removes all animations).

[dokson]

@mm-wang Opened #8098 with a fix that builds on your proposal.

Starting from your suggestion to add @include react-transition to .bp6-overlay-content, I noticed that Dialog and Drawer also render onto that same element (Overlay2 spreads bp6-overlay-content directly on its child, not on a wrapper) and already define their own opacity/transform transitions in _dialog.scss / _drawer.scss with different durations and easings. Adding the rule unconditionally would create two competing transition: opacity declarations on the same element with the same specificity — last one in the cascade wins, and Dialog's $pt-transition-duration * 3 would be replaced by the overlay's * 2.

To keep the original animations intact, I scoped the new rule with :not(.bp6-dialog-container, .bp6-drawer). Other Overlay2 consumers (Popover, Popover-next, OverlayToaster) pass a custom transitionName so they emit their own bp6-popover-* / bp6-toast-* classes and aren't affected.

Could you confirm this matches what you had in mind? Happy to adjust if you'd prefer a different approach (e.g. moving the transition into Dialog/Drawer's own files instead).