States & Data Attributes

[00:00:00]
>> All right, so, we talked about choreography. Now we're gonna talk about states. Because, especially when working with web applications, you are dealing with different states. And even if you're not, like if you're just styling an input, or a button, there's different states that those elements can be in.

[00:00:22]
And so, it's important to define, just the different styles and animations that you use, for each of the different states. So, let's actually take a button as an example. So, I'm going to go back to my main file. And, we have a few balls here. So let's just add a button.

[00:00:50]
Divs aren't buttons, let me make this a button. And so let's open our styles as well. So, let's type this a little bit first. This is going to have appearance none, background blue, color white font-weight bold. Let's add some padding just 2rem, border none. All right, so let's see how that looks.

[00:01:18]
So if we go back to here. All right, so, that's at the bottom over there, let's get rid of our balls for now. All right, so now we have a button. This is gonna say click me. Okay, so there's different states that this button could be in. And we talked about this briefly before, but this button, you could hover it, you could focus it, the button could be active, it might not be and so, let's add some styles for that.

[00:01:51]
So, and we're gonna be using transition here as well, so I'm just gonna say transition. Just to make things simple, we're gonna say all 0.3 seconds and we're gonna go with the default easing over here. So, let's do some common styles for the button. Let me make this 2rem, 3rem.

[00:02:12]
So, we could say that when we hover it, it's gonna have an opacity of 0.8. And so, you could see here, actually it's not really Let me just make sure i'm in the right thing or 0.5, see that. Okay, so you can see that it's going between 0.5 and 1.

[00:02:40]
And so of course you could also click it. So, when it's active, I'm gonna transform, translate Y and let's just move this down maybe 20%. All right, so you see that's working. But when thinking about states like there's many states that it could be in and we might want to define when we're clicking it even if we're hovered, we want it to be full opacity.

[00:03:08]
So, we could say, that this should be opacity 1. So, this is just an example of like just different states. And, also we have 0.3 seconds defined for the overall transition? So, if we click this and we want it to be maybe a little bit faster, we could specify it for that individual state.

[00:03:34]
So we could say transition duration, maybe 0.15 seconds. So, it hovers and it goes transparents pretty smoothly, but when you click it it's pretty fast. And so, these are things where it's important to think about. Now, there's other states which might not be native to the elements, or to whatever you're working on.

[00:04:04]
For example, you might want to define some sort of app wide state, in which you wants to show some sort of animation, or set some sort of animation property, such as duration and delay. And so for that, one of my favorite things to use, is called data attributes.

[00:04:22]
So, let me just show you what that looks like real quick. Let's say that I have a data attribute on the entire app, called data-state. And so let's say that this is, loading. And so, what's cool about this is that I could, again, use CSS variables. And so let's put this just on, we put it on the app.

[00:04:51]
So, app and let's see I have a color or actually opacity. So, opacity i'm going to set this to,1. However, if my app is in a loading state I might want that opacity to be 0.5 And so, this is how you would select that data attribute in CSS.

[00:05:23]
So, this is something that is not really commonly used, but it's extremely useful. So, this allows you to define custom attributes, or data attributes and there's a reason that we're prefixing it with data which I'll talk about soon. But you could select elements based on that attribute. So we could say, if the app has this attribute of data-state equals loading, then we want the opacity to be 0.5.

[00:05:49]
And so now, we could set something like the h1 opacity. And so we could see because it's loading, it's actually a little transparent. So, let me actually copy that over here. Okay, so, now you see it's loading. It's little bit transparent in fact, let's make this even more prominent just because that might be hard to see.

[00:06:22]
So ironically, I'm making it harder to see, to make it easier to see the difference. Anyway, so you see that now that the app is in the data-state loading. We are setting that CSS variable, so if I go in the elements, Just exit this and change this to something else like success.

[00:06:45]
Then we see that it's fully transparent or fully opaque. Loading, it goes right back to loading. So, why are we prefixing this with data? What's so special about data? So, the really cool thing about this and I'm gonna grab the app right here. So, const app equals document.query selector app.

[00:07:13]
All right, so what's great about this is that, you could do this one of two ways. If you want to just modify any attribute, that it's like app.set attributes and then you want to set maybe data-states and you wanna set that to loading. It's already loading, so we could do success.

[00:07:33]
So, this definitely works. But it's a little bit verbose. So instead, what you could do is you could say, let me zoom in a bit, app.dataset. And so, here is what we get for dataset. It's going to give you all of those attributes prefixed with data dash whatever.

[00:07:57]
So we could say, app.dataset.state equals loading. That's all you have to do. And then it's going to change, the data attribute for that. So, this makes it really useful to work between, JavaScript and CSS. Yes.
>> Is opacity the attribute or a variable?
>> So, opacity is the variable.

[00:08:21]
So, we could even call this, transparency if we wanted to. And, it's gonna work the same. So, So that's a success and yeah, sorry for the naming conflict.