Send & Receive Transitions

[00:00:00]
>> Okay, so things are mostly looking good. But we would like to add some of the polish that we saw in the original app. So if you remember, in the one that we've got deployed, when we find a pair, then it kind of transitions nicely from the grid into that found array.

[00:00:19]
And we can do this with Svelte's transitions. So let's, let's build that now. The first thing we're going to need to do is create a pair of send and receive transitions just like we saw in the example with the to do list. So we'll create a new module, call it transitions.ts.

[00:00:40]
And inside there, we're gonna import the crossfade function. From svelte transition, Along with cubicOut. From svelte/easing, and we're gonna create a pair of send and receive transitions. By calling crossfade. Give it a duration of 400 see how that looks, and then an easing of cubicOut. Okay, and now when something leaves the grid, we want it to appear in the found array.

[00:01:39]
First, we need to add the send transition from the square. And you'll recall that, We do that by adding out:send, and then providing a key. Let's for now we'll just use the emoji itself as a key. We need to import the send function, From transitions. We've got to export it.

[00:02:27]
So we'll do that now and then we need to have the corresponding receive transition in the found array so open that up. Same deal. When it comes in, we'll do a receive, just auto complete that, import it from transitions. And we'll give it the same key. Let's see what happens now that we've added those transitions.

[00:03:06]
First we need to find a matching pair, I think that was the monkey no that was the monkey okay. All right, almost works. Only one of the monkeys went down into that found array. One thing I just noticed is that this needs a height of 100% so that it's properly centered.

[00:03:29]
And the reason for that is that when we create a pair of send and receive transitions, it operates on this map of counterparts. And if you have two elements with the same key, it's a little bit like having a keyed each block with the same key. It just gets confused.

[00:03:42]
It doesn't know which elements it's supposed to be transitioning. So we need to be able to distinguish them a little bit better, and we need to have. Two elements in the found array for the emojis in the grid to correspond to. So we're gonna add a new element here, let's call it div class=pair And inside that, we're gonna have two copies of this image.

[00:04:12]
And those need to have two unique keys. So let's call them emoji:a and emoji:b. We'll add some styles to that pair element And then the images we're gonna have position absolute. Left, top, 0 and the width and height are gonna be 100%. Okay, so you've got two monkeys stacked on top of each other now.

[00:04:53]
And they're gonna have separate transitions, but we need to have some way of representing this. inside the grid, in other words here. And so we're gonna need to be able to pass that information in from the grid. We'll add a new prop to the Square.svelte component. We'll call it group.

[00:05:19]
A group could be either a or b. And then we'll use that in the key that we passed to the send trasnsition. Right now, of course, if we open the grid.svelte, it's gonna complain that we're not passing in the group. And there's a few different ways that we could solve this.

[00:05:53]
The way that I'm gonna do it is if the current iteration in this loop is the first instance of this emoji. It's gonna be the a group, otherwise it's gonna be the b group. And the way that we can do this is if grid index of emoji is the current index, Then it's group a, otherwise, it's group b.

[00:06:24]
And then maybe if we find another pair, all right, it's starting to look like it's supposed to. We can add a little bit more styling to our found array, give it a little bit of a drop shadow. And each of these will turn into a white disk. I'm just going to get rid of the position.

[00:07:28]
We'll get rid of the left and the top here and we'll give these some slightly different widths. We'll make this a display flex container. And it's starting to look a little bit more like the original.