React-spring: Why first element of transitions array doesn't have leave animation?

[AngryBotIY]

I coded simple "todo-list" application few days ago and try to apply react-spring for todo-items.

Everything works fine, but if todo-list have only one element, the element doesn't have leave animation.

I use:
react 17.0.1
react-dom 17.0.1

react-spring 8.0.27

styled-components 5.2.1

There is codepen link for example: https://codepen.io/AngryBot/pen/rNLEYbN

Code Line 5: react-spring import
Code Line 236: react-spring usage

[tomdohnal]

It's related to this piece of code

{todos && Boolean(todos.length)
      ? transitions.map(({ item, props: transition, key: id }) => <Todo style={transition} key={id} onRemove={handleRemove} {...item} />)
      : <Nothing />}

If you remove the last remaining todo item and there are no items in the todos array (and thus the todos && Boolean(todos.length) is false), you don't render the transitions anymore (you only render <Nothing /> instead.)

• you can use a variable like isAnimating to prevent the <Nothing /> component being render while the last todo is fading out

See https://codepen.io/tomdohnal/pen/dypovOB?editors=1011