Create Smooth List Transitions With the useTransition Hook

Christian Nwamba: [0:00] Here I have a simple todo list, where you can add todos, let's say See a friend. You can remove todos as well by clicking on them. You can reset todos. Let's say you have more than one todos and you want to clear everything. To do items you can click on the Reset button.

[0:23] Let's animate this list so that when we add or remove items from the list, you can see the list items coming on guard in an animated way.

[0:34] First import {useTransition, animated} from 'react-spring'. Let's create a transition. First, create a variable to store these transitions. This variable is going to store the returned value of useTransition.

[1:03] UseTransition takes in three arguments. The first one is the array of items we are iterating over. In this case, we have todos.

[1:10] The second one is a function that tells useTransition what the key of each item is. In this case, we'll pass in a function that receives each todo item and tells useTransition that the key for each of this item is the id. Lastly, it takes the configuration for this animation.

[1:32] There are three stages to the transition. The first stage is the from stage. This is where you set things off or set things to . It's basically the initial state of your transition. We can set opacity and height to .

[1:50] The second stage is the enter stage. The enter stage is what happens when an item in a transition is entering the screen or when it's done entering the screen. You want to set your opacity to 1 here, and the height to something like 20px.

[2:07] Lastly, what happens when the item leaves the screen. We want to reset things back to just like the way it was at the from stage.

[2:21] Instead of iterating over todo items, let's iterate over transitions. Replace todos with transitions. Then you would receive three things in an object. You have an object and you receive the item you're iterating over, the animation properties, as well as the key of the current item.

[2:45] You can replace this todo.id with the key. You can also set the style of this element to the property received from transitions and then replace every instance of todo with item.

[3:07] If we try this out, you would see that we are still not getting animations working. The reason why this is not working is because we are applying animated values to the style property of a normal JSX element. For this to work, we have to use the JSX element from the animated object. We also have to do this for the closing tag.

[3:39] If you're wondering where animated came from, we imported it at the beginning when we started refactoring this code. If you reload this page and try to add items, you can already start seeing animations. If I click on each of these items, delete them, you can see they all go away in a very smooth way.

[3:59] To recap, the first thing I did was to import animated and useTransition. Then I created a transition based on the todo items I had. Each transition has three stages. The first stage is the from. The second is the enter. The third is the leave.

[4:17] The from stage is the initial state. The enter stage is what happens when the element is already on the screen. The leave stage is what happens when the element has left the screen. We iterate each of these transitions, and then use the items received from this iteration to present each of the items. This makes things move in a smoother way based on the animation we defined here.