1908291 - CSS @starting-style not working when removing/hiding elements

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[harald]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:129.0) Gecko/20100101 Firefox/129.0

Steps to reproduce:

Open Codepen from Adam Argyle https://codepen.io/argyleink/pen/qBGOamz

Click on "Remove" button.

Actual results:

Elements are hidden without any animation.

Expected results:

Elements should animate opacity and scale before being hidden.

Comment 1

[harald]

More info here: https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects#exit-stage

Comment 2

[Daniel Holbert [:dholbert]]

Boris, could you take a look?

Comment 3

[harald]

Looks like this is due to the lack of transition-behavior: allow-discrete.

Comment 4

[Boris Chiou [:boris]]

I suspect this may be related to the animation of display. In the test case, it relies on the discrete transition of display property. However, Gecko doesn't support the animation/transition of display property (Bug 1834877).

Comment 5

[Boris Chiou [:boris]]

We can revisit this bug after we fixed Bug 1834877.