A rotated element's crossfade animation goes in wrong direction

[ffossum]

Describe the bug

An element with a css transform rotation will move in the wrong direction when transitioning using crossfade. The result is that the illusion (of one element moving from one place to the other) breaks, and instead it looks like two separate elements appearing from and disappearing into different locations.

I love the crossfade feature :heart:. I'll just have to avoid using it with rotated elements until this is fixed.

Reproduction

https://svelte.dev/repl/7683202144db47858ab63591919ae131?version=3.48.0

By removing the rotation from the css transform, everything looks normal again: https://svelte.dev/repl/19da212e1b9446338b05ab73091d1cee?version=3.48.0

Logs

No response

System Info

Svelte 3.48.0

Severity

annoyance

[paoloricciuti]

I'm working on it and I've pinpointed the issue. Basically when it moves the b element where a was getClientBoundRect does not take into consideration the rotation. The fix could be moving all the already present rotation at the end...but this won't take into account elements that are rotated not in multiples of 90 deg.

[paoloricciuti]

As an update: you can't move the rotation at the end because the getComputedStyle().transform return a matrix of all the transformation applied. I have to dig deeper into this to find a way to get the actual position of a rotated object instead of the clientBoundRect.

[pedeEli]

is this still being worked on, because i think i have an idea on how to solve this issue?

[paoloricciuti]

is this still being worked on, because i think i have an idea on how to solve this issue?

Completely forgot to update this issue, feel free to go ahead and solve this if you have a solution

[pedeEli]

do you know of an easy way to test this?

[paoloricciuti]

do you know of an easy way to test this?

Sure, just copy the code of the action inside the repl, do your modification there. This way you can easily test it