score:5

Accepted answer

your problem is because your key is not updating. since you are replacing key of 0 with key of 0, it think it has already applied the transition.

when changing the key to be ${entry}_${index}, it'll update they key to 'a_0', then 'f_0' which are unique and different, and therefore trigger the effect you want.

entry alone as a key does not work either, since it already exists in the dom, so it'll not re-render the transition.

<transition
  native
  from={{
    transform: `translatey(${index === 0 ? "-200%" : "-100%"})`
  }}
  to={{ transform: "translatey(0)" }}
  config={config.slow}
  key={`${entry}_${index}`}
>

check it here https://codesandbox.io/s/kkp98ry4mo


Related Query

More Query from same tag