patternfly/patternfly#7487
The react component toggles the hidden attribute to hide/show. Off the top of my head, that's probably best achieved by
- On expand,
.pf-m-expanded fires the transition. I'm not 100% on this, but I think you're going to need some delay between removing hidden and adding .pf-m-expanded. I was able to achieve this by just wrapping the change of .pf-m-expanded in a setTimeout() set to 0s - https://codepen.io/mcoker/pen/dPPeagZ
- On collapse, before adding
hidden, add an event handler for the transitionend event. The transition you want to watch is opacity - this animates in both reduced motion and not, so it's something you can reliably look for.
- When that event fires, add
hidden.
I've mentioned this in a couple of other places, but depending on how much work is involved with this and if there are any things that make this fragile or not optimal, core can instead use some hot-off-the-press CSS magick to do everything. We would hide/show the expanded content by toggling display: none. Here's a small demo - https://codepen.io/mcoker/pen/yyyjZZN
patternfly/patternfly#7487
The react component toggles the
hiddenattribute to hide/show. Off the top of my head, that's probably best achieved by.pf-m-expandedfires the transition. I'm not 100% on this, but I think you're going to need some delay between removinghiddenand adding.pf-m-expanded. I was able to achieve this by just wrapping the change of.pf-m-expandedin asetTimeout()set to 0s - https://codepen.io/mcoker/pen/dPPeagZhidden, add an event handler for thetransitionendevent. The transition you want to watch isopacity- this animates in both reduced motion and not, so it's something you can reliably look for.hidden.I've mentioned this in a couple of other places, but depending on how much work is involved with this and if there are any things that make this fragile or not optimal, core can instead use some hot-off-the-press CSS magick to do everything. We would hide/show the expanded content by toggling
display: none. Here's a small demo - https://codepen.io/mcoker/pen/yyyjZZN