Can you explain the implementation choices?

[dustingetz]

Hi Ryan, I am studying react-magic-move and would like to understand why you need a portal with manually positioned children. Can you write a few sentences about why it's coded this way and what isn't possible with just css transitions?

[everdimension]

I can answer this. You cannot animate a dom element just changing it's place in the DOM. There's no animation or animation event for that.

The only way to animate positions of DOM elements is if they are absolutely positioned and have left and right properties set. Those properties are animateable. But layout with absolutely positined elements is terrible to maintain, because the parent element now has no hight (which you can manually add) and changes in browser's size also have to be manually setup, which might never give a pretty result.

So what this library does is let you have elements styled and positioned in any way you want, and it creates those absolutely positioned clones for you. And animates them when it sees that your elements have changed their positions in the dom.