Transcript from the "will-change Exercise" Lesson
>> Steve Kinney: There is, we're going to take a look real quick. I'll switch off this slide. We'll look at the "Paint Storming" example. We'll take a first look and we'll see right now it causes a paint storm. What we want to do is we want to refractor it, so that when the mouse enters it moves up to it's own layer.
[00:00:17] And then when it ends, we put it back down or when the mouse leaves. So let's take a look at the code and then I'll give you some time to play around with this. So let's actually look at it in the browser first. I don't need the special, super special mode anymore.
[00:00:37] We're going to paint storming, I've got this red box, click on it, look at that little green array paint follow it, let's refresh this, it's fun to watch. We're going to paint, and it's like a little paint storm, it's just repainting every pixel. All right, what is this?
[00:00:57] So if we look at the code and we look under moving boxes, thought that was the other one, paint storming. Cool. We look under paint storming. Ignore that there is a solutions directory, it is not important. Pay no attention to the solutions directory. We are going to use jQuery for animation because 10 years ago, and that's what we're doing right now.
[00:01:40] We'll refresh. I'm going to turn off the paint flashing when you also try to collect the performance metrics. Otherwise, things will be horrifyingly bad because the browser is also trying to paint all those green squares and you'll get noise. So you turn off the paint flashing. Click it.
[00:02:22] Not doing work is faster than doing work. So we look at the code.
>> Steve Kinney: There is this move class, which seems to know how to get it all the way over, and there does seem to be a transition. So if we apply that move class instead of doing it as a jQuery, we could just use CSS transitions, right?
[00:02:57] So this is your turn to give it a shot, then we'll do it together. So I'm gonna put this slide up for a second, but then I'm gonna go back to that other code that we saw earlier, and that'll be where I freeze it for a little bit.
[00:03:06] But your job is to get rid of that jQuery animation, use the CSS transition, but when the mouse enters, when we wanna add will-change, when they click, we want to add this class. And then when the mouse leaves, where the transition ends, that will be when we put it back on its own layer because we are good citizens in the browser community.