Nice and simple 😁
But there's something I don't understand: why the transition is working if the element is beeing render again when the state change? Maybe I'm missing something about how transitions work 🙄
From the App function, only the 'recipe' for rendering a new component is returned.
The react mechanism detects the differences and updates only the things in the DOM tree that are finally changed between the render cycles.
In our case, it is only left style property value (from -300 to 0). It means that nothing else changes on the page in the DOM.
Nice and simple 😁
But there's something I don't understand: why the transition is working if the element is beeing render again when the state change? Maybe I'm missing something about how transitions work 🙄
To understand it better, go to developer tools, find the menu inspector, click to show/hide the menu and see what changes.
Thanks for the excellent explanation :)
From the App function, only the 'recipe' for rendering a new component is returned.
The react mechanism detects the differences and updates only the things in the DOM tree that are finally changed between the render cycles.
In our case, it is only
left
style property value (from -300 to 0). It means that nothing else changes on the page in the DOM.The
transition
style property is always assigned to the DOM element (menu).