I am struggling to figure out why my transition group is not animating properly on the removal of the first element from a list. I tried producing a minimal, reproducible example to share on my local machine first and was successful. I then copied the same code to CodeSandbox to share with StackOverflow but the issue no longer exists for some reason.
Here is the CodeSandbox example which works properly, and here is a recording of the same code producing the issue when served on my local machine.
In the recording, you'll see the first two elements are removed properly. They translate right and fade out, and the subsequent elements smoothly transition upwards to fill the voided space.
However, when I remove the first element on my next two clicks, the leaving element transitions properly but the subsequent elements jump instantly.
The issue is produced in Chrome, Firefox, and IE. Any idea why it's working properly in CodeSandbox but not my machine despite similar code?