useTransition

[00:00:00]
>> There's one other thing that we can look at with react-spring right now, useTransition, this is a really good one. This you can use to transition an array of elements. So what you can do is have an array of items here. And you can call useTransition and say hey, these are the items we want, this is the key for each item.

[00:00:22]
And when it enters, this is the value it's gonna have. When it leaves, we want it fade out. So what this is gonna be doing is taking a list of items, and when it's toggling through them, it's going to fade them in and out depending upon if they're showing or not.

[00:00:37]
And this is really useful. This would be really useful if you had a photo gallery, for example. Okay, you can also toggle between two different elements. So if you have a hello and goodbye, you can just transition between the two. So useTransition is super nice because it mounts and unmounts elements from the DOM.

[00:00:54]
This is great if you have modals, right? We'll use this for our modal. We don't need our modal in our DOM if it's not visible. So there are three things this can do. It can toggle between two elements, it can transition an array of elements, like a photo album, or it can just mount and unmount one element from the DOM, okay?

[00:01:11]
So let's just do one more example, it's in the same exact code pen, so you don't have to go anywhere. If you go in index, we're gonna render EmojiCarousel. I'm sorry, in app, we're gonna render EmojiCarousel, EmojiCarousel. And basically, we just have an array of emojis here, and we just wanna toggle between them.

[00:01:37]
So we have a button here it says, Make happy, That's actually not an array of elements, that's just two different elements. So if I say, Make happy, I want it to be happy, and if it's, Make sad, I want it to make it sad. So, first, let's set a Boolean state here.

[00:01:56]
So if I'm happy, it'll be true. And we'll you setHappy as our updater function. So useState, we'll set it to true by default, let's have it be happy by default. Now let's make our transition, so, Define a new constant, and this will use the useTransition hook. This is gonna take three arguments.

[00:02:20]
The first is gonna be our state, so our happy value. The next is just gonna be null, so if you had an array of different items, this would be the key for each element. But we don't have an array of items, we're just toggling between two. And then, again, the last argument is just an object that contains our from, where we want this to animate from, on enter, what do we want this to look like, and on leave, what do we want this to look like?

[00:02:45]
Ours are gonna be pretty simple, we'll just say opacity of 0. So I want it to fade in opacity of 0. We also need to set this at position absolute. Absolute, this has to be a string here. Because otherwise what's gonna happen if we're transitioning to elements is that if it's not positioned absolutely, you're gonna get some weird jumping around.

[00:03:06]
Because it's gonna be unmounting, and then it's gonna be mounting, and it's gonna be all sorts of weird. So, by setting position absolute, we'll make sure it'll fade in and out of the same exact position. On enter, so opacity to 1. And then again, we want it to just fade out.

[00:03:24]
So onClick of this button, let's just toggle our state, so onClick, We'll do setHappy and then whatever the opposite is, so make it sad if it's happy, make it happy if it's sad. So unlike useSpring, where we could just simply set a style attribute and pass in our animation, we actually have to map over transition, it's a little bit more complicated.

[00:03:47]
So let's create opening and closing curly brackets here. So let's map over. We need to extract out our item and its props. It's a little confusing, so make sure you have this argument here. And it's destructuring out item and props. And we have a return statement. So we're gonna destructure out item and props here.

[00:04:10]
This is a little confusing when you're transitioning between two elements, this is essentially our state. So react-spring has some weird terminology. Sometimes it calls things props, sometimes it's called things item, it's a little confusing. But if item exists, so if our state is true, we want it to be happy, or if our happy state is true, let's render the happy elements.

[00:04:30]
So I'm gonna copy this span here. So if we're happy, return our happy span. And remember what I said, this has to be animated.span. Because otherwise react-spring's not gonna know what to do with it. But if we're not happy, let's render our send span, And again, animated.span. The only other thing we need to pass is these props that we're destructuring out.

[00:04:59]
This is our style, so this needs to be style = [props], and you set that on both of them. Okay. I always add Ss to things when there shouldn't be an S, Okay, you're yelling at me cuz it says not accessible, but, Make happy. This happens really quickly, but you can see it's fading out before the other one's fading in.

[00:05:33]
And just to be very explicit, if we remove this position absolute, what you will see, Is that weird jumping, right? Cuz it's mounting and unmounting things from the DOM. So if we don't set position absolute here, It's a little weird. Okay, so that's how you would transition between two elements.