Opening modal immediately after hydration yields inconsistent transitions

[nwhittaker]

Actual Behavior

Once a calcite-modal element becomes hydrated, setting the open attribute causes the modal's backdrop to appear abruptly while the dialog area transitions in smoothly.

Expected Behavior

The modal's backdrop also transitions in smoothly.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/qBoxdgg

Reproduction Steps

1. Visit code sample and notice how the modal's backdrop appears immediately.
2. Close the modal.
3. Click the Open modal button to re-open; notice how modal's backdrop transitions smoothly now.

It may be helpful to use Chrome's Animations tab to slow down the transitions.

Reproduction Version

beta.86

Relevant Info

A workaround is to wait about .5s after hydration before setting open to produces the expected result.

In Ember it's typical to render the <calcite-modal> element at the time it needs to open (ideally w/out a delay). open is set after hydration because setting it initially currently has a couple drawbacks:

1. Both backdrop and dialog appear abruptly (possibly expected?).
2. Focus not trapped (et al.) by modal if initially active #4764

Regression?

No response

[jcfranco]

Looks like the initial transition is skipped entirely because the host is initially rendered as end state (host initially rendered w/ open), so there's no initial set of props to animate/transition from.

[nwhittaker]

There may be some confusion on my part around when an element is considered rendered relative to when it is considered hydrated.

I understand if there's no transition when open is enabled before hydration. But enabling it any time after hydration feels like it should be safe to assume the styles for the unopened state were applied.

[geospatialem]

Reallocating this issue to the February priorities milestone.

[jcfranco]

There may be some confusion on my part around when an element is considered rendered relative to when it is considered hydrated.
I understand if there's no transition when open is enabled before hydration. But enabling it any time after hydration feels like it should be safe to assume the styles for the unopened state were applied.

Finally getting back to this. 😅 When a component is hydrated, it means it has finished lazy-loading its implementation and has been initially rendered.

Setting open after hydration or first render, should pretty much display the transition how you would expect. The real issue here was due to the initial render already having open and the transition not having a 'closed' state to transition from. We had fixed this previously for the modal itself, but not its container (transitions the underlay).

#6564 should help keep all of modal's transitions in sync.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on master