Keys not working, element loses css transition

[santiagopuentep]

If I swap the position of two react elements (item0 and item1) positioned with transform: translate(); a css transition is triggered, only if the elements were rendered in the same order.

If I change the order of the render (position swap still the same but now item0 renders after item1), the css transition is not triggered.

It looks like react is deleting the DOM element and recreating it, even if they have React keys set and no componentDidMount/componentWillUnmount are called.

Here is a simple JSfiddle with the problem.

https://jsfiddle.net/santiagopuentep/vvpezbp9/2/

[gaearon]

Can you create a vanilla JS version and verify the issue still reproduces? It could just be a bug in how browser runs transitions.

[huy-nguyen]

I've seen a similar problem too @santiagopuentep and I want to find out the reason. I noticed that elements only get CSS transition if they move "forward" (i.e. to smaller index number) wrt their siblings in the DOM order. There's also no lifecycle hooks called. This is fixed if I maintain the DOM ordering between transition.

@gaearon What do you need to troubleshoot? I'm using Fiber (16-alpha.12) if that matters.

[syranide]

I noticed that elements only get CSS transition if they move "forward"

@huy-nguyen This is an artifact of how React handles reordering, but it's not really a React bug I would say. Reordering has to happen one way or another, it's just that React always handles reordering in the same direction. So in the end this is simply browsers being quirky, you should be able to avoid this by reordering via FlexBox instead.

Related #870

[santiagopuentep]

@gaearon I was finally able to create a vanilla JS version and the problem persists, so it's not React.

Changing the positioning of the DOM nodes resets the transition of the ones that were moved (at least with DOMNode.append()).

Here is a JSFiddle with the vanilla version:
https://jsfiddle.net/santiagopuentep/zndmx89z/

Thanks for the help anyway!