There are just a few ways CSS is used for interaction.
Pseudo-classes: :hover, :link, :active ...
Animation: animation
Transition animation: transition
The combination of these interactions can really play some tricks, such as the topic of our article, CSS state management. Let's look at an example together.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS state management</title>
<style>
@keyframes statement {
0% {
--state: initial;
}
1%, 100% {
--state: ;
}
}
.zero2one {
width: 100px;
height: 100px;
border: 1px solid black;
--hover: var(--state) green;
background: var(--hover, red);
animation: statement 1ms linear 1 forwards paused;
}
.zero2one:hover {
animation-play-state: running;
}
</style>
</head>
<body>
<div class="zero2one">Zero2one</div>
</body>
</html>
The square is originally a red background, when we move the mouse in, the background color changes to green, and will not change back. For normal interactions, we should only use :hover. After the mouse is moved out, the element returns to its original color. And how do we do it now?
This is because we stored the action "mouse into box"! This is "CSS state management" Let's decipher this code together!
State Management- CSS Variable
Let's look at an example of a CSS variable.
html {
--state1: initial;
--state2: ;
}
.zero2one {
--color1: var(--state1) red;
--color2: var(--state2) blue;
color: var(--color1, yellow); /* final font color is yellow */
background: var(--color2, pink); /* final background color is blue */
}
In fact, this is with the help of the var() function, the second and third values are used when the first value is invalid. The nth value is used as the feature of the candidate value (as shown in the above code).
Then, there is another tricky operation that is color: var(--color1, yellow). It will eventually show yellow because the variable --color1 refers to another variable --state1:initial. It is precisely because the value is initial and the final color shows yellow. --color1 was recognized as an invalid value.
At this time, some people will say that I directly set --color1: initial red; Why do you need to refer to one more variable? I tried it, and writing it directly like this is useless. I do not know why either! Anyone who knows can tell me in the comments.
Then the variable --color2 references the variable --state2: ;. Because its value is empty, in fact, the variable --color2 corresponds to blue. Then, var(--color2, pink) naturally also shows blue.
State Management - CSS Variable Toggle
With the help of the characteristics of CSS variables that we just learned about, we can make a variable switch its value to achieve CSS state switching. How to switch CSS variables without using JS? At this time, we need to use the animation mentioned at the beginning of our article.
We first define a keyframes. Examples are as follows.
@keyframes statement {
0% {
--state: initial;
}
1%, 100% {
--state: ;
}
}
In the initial state, the value of the variable --state is defined as initial, and the value of the variable --state is defined as empty in the non-initial state.
It seems that there is still no mention of how to switch. At this point, you can use a CSS property animation-play-state, which controls the motion state of the element animation. Suppose we set the motion state of an element to paused at the beginning.
.zero2one {
animation: statement 1ms linear 1 forwards paused;
}
Initially, the element is in the paused state. So according to the initial state of the keyframes we defined, there is a global variable --state with the value initial. Then you can change the motion state of the element to running after the user performs some action (:hover, :active, etc.).
.zero2one:hover {
animation-play-state: running;
}
When the animation state of an element is set to running, its animation is no longer the initial state. And because we set forwards. So at this time, there is a global variable --state, and its value is empty. This achieves dynamic switching of variables. Combining the above two techniques together achieves a simplified version of "CSS state management".
State Management - Practice
This also leads to a more interesting thing, that is, CSS implements the drawing board! I believe you all understand the principle, then put the code directly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS state management</title>
<style>
@keyframes statement {
0% {
--state: initial;
}
1%, 100% {
--state: ;
}
}
.zero2one {
background: rgba(222 222 255 / 0.125);
border: 1px solid #eee;
display: inline-block;
}
li {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
width: 3px;
height: 3px;
float: left;
--bg-color: var(--state) green;
background: var(--bg-color, transparent);
animation: statement 1ms linear 1 forwards paused;
}
li:hover {
animation-play-state: running;
}
</style>
</head>
<body>
<ul class="zero2one">
<li></li>
<li></li>
<!-- 10000 li tags omitted here -->
</ul>
</body>
</html>