[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).