toasted-notes icon indicating copy to clipboard operation
toasted-notes copied to clipboard

bottom exit animation doesn't match top exit animation

Open bmcmahen opened this issue 5 years ago • 2 comments

This is because we animate the height attribute.

Possible solutions include using marginTop, marginBottom as animation attributes, or absolutely positioning the element inside.

I'm not hugely concerned with this but my ocd might get the better of me.

bmcmahen avatar Apr 01 '19 17:04 bmcmahen

@bmcmahen Have you considered animating transform: translateY()?

baleeds avatar Apr 10 '20 12:04 baleeds

I think ideally we'd animation everything with transforms. Animating with translateY is easy when you're dealing with just one toast element, but you need to account for a situation in which you have a stack of 3 items and you want to remove the middle one. This should immediately animate the other toasts into place, and animating height is the easiest way to achieve this.

I'm definitely open to other ideas here - and would like to revisit this at some point if I ever have time to hack on this.

bmcmahen avatar Apr 10 '20 15:04 bmcmahen