CSS 狀態(tài)管理，玩出花了！
CSS用于交互的方式無(wú)非就那么幾種：
- 偽類：?
?:hover??、??:link??、??:active?? ... - 動(dòng)畫：?
?animation?? - 過(guò)渡動(dòng)畫：?
?transition??
這些交互方式組合起來(lái)，真的可以玩出一些花樣，例如我們本文的主題，CSS的狀態(tài)管理，一起來(lái)看個(gè)例子??
<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狀態(tài)管理</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">零一</div>
</body>
</html>
看一下具體的效果：
小試牛刀
正方形本來(lái)是紅色背景的，當(dāng)我們鼠標(biāo)移入后，背景顏色變?yōu)榫G色，且不會(huì)再變回去。如果是普通的交互，我們應(yīng)該只用到了 ??:hover??，鼠標(biāo)移出后，元素會(huì)恢復(fù)原來(lái)的顏色，而我們現(xiàn)在是如何做到的呢？
這是因?yàn)槲覀儼?nbsp;"鼠標(biāo)移入方框" 這個(gè)動(dòng)作存儲(chǔ)下來(lái)了！這就是 "CSS狀態(tài)管理" 我們一起來(lái)解讀這段代碼吧！
CSS變量
來(lái)看一個(gè)CSS變量的例子
html {
--state1: initial;
--state2: ;
}
.zero2one {
--color1: var(--state1) red;
--color2: var(--state2) blue;
color: var(--color1, yellow); /* 最終字體顏色為yellow */
background: var(--color2, pink); /* 最終背景色為blue */
}
其實(shí)這就是借助了 ??var()?? 函數(shù)第一個(gè)值無(wú)效時(shí)會(huì)用第二、第三個(gè)值、第n個(gè)值作為備選值的特性（如上述代碼所示）
然后還有一個(gè)騷操作就是 ??color: var(--color1, yellow)?? 最終會(huì)展示黃色，因?yàn)樽兞?nbsp;??--color1?? 引用了另一個(gè)變量 ??--state1: initial?? ，正是因?yàn)橹禐?nbsp;??initial?? ，導(dǎo)致最終 ??color?? 展示了黃色，??--color1?? 被認(rèn)定為一個(gè)無(wú)效值
這時(shí)有人要說(shuō)了，那我直接設(shè)置 ??--color1: initial red;?? 不就好了，為啥還要多引一個(gè)變量呢？我試過(guò)了，這樣直接寫是沒用的，別問(wèn)，問(wèn)就是我也不知道?。ㄓ兄赖男』锇榭梢栽u(píng)論區(qū)告訴我~）
然后變量 ??--color2?? 引用了變量 ??--state2: ;??，因?yàn)槠渲禐榭?，所以其?shí)變量 ??--color2?? 對(duì)應(yīng)的也就是 ??blue?? ，那么 ??var(--color2, pink)?? 自然也是展示藍(lán)色了
變量切換
借助剛剛了解的CSS變量的特性，我們可以讓某個(gè)變量切換其值即可實(shí)現(xiàn)CSS的狀態(tài)切換，如何不借助 JS 實(shí)現(xiàn)對(duì)CSS變量的切換呢？這時(shí)候就要借助我們文章開頭提到的 ??animation?? 了
先定義一個(gè) ??keyframes??
@keyframes statement {
0% {
--state: initial;
}
1%, 100% {
--state: ;
}
}
在初始狀態(tài)時(shí)將變量 ??--state?? 的值定義為 ??initial??，非初始狀態(tài)將變量 ??--state?? 的值定義為空
好像還是沒有講到如何切換。此時(shí)可以借助一個(gè)CSS屬性 ??animation-play-state?? ，其控制了元素動(dòng)畫的運(yùn)動(dòng)狀態(tài)，假設(shè)我們一開始給某個(gè)元素設(shè)置的運(yùn)動(dòng)狀態(tài)為 ??paused??
.zero2one {
animation: statement 1ms linear 1 forwards paused;
}
一開始該元素就是暫停狀態(tài)，所以根據(jù)我們定義的 ??keyframes?? 的初始狀態(tài)來(lái)看，此時(shí)全局有一個(gè)變量 ??--state??，值為 ??initial??
然后可以在用戶進(jìn)行某些操作（??:hover??、??:active??等等）后，將該元素運(yùn)動(dòng)狀態(tài)改為 ??running??
.zero2one:hover {
animation-play-state: running;
}
當(dāng)將元素的動(dòng)畫狀態(tài)設(shè)為 ??running?? 后，其動(dòng)畫已經(jīng)不是初始狀態(tài)了，并且因?yàn)槲覀冊(cè)O(shè)置了 ??forwards?? ，所以此時(shí)全局有一個(gè)變量 ??--state??，其值為空
這樣就做到了變量的動(dòng)態(tài)切換
將上述兩個(gè)技巧組合在一起，就實(shí)現(xiàn)了簡(jiǎn)易版的"CSS狀態(tài)管理"
實(shí)戰(zhàn)應(yīng)用
由此還引申出了一個(gè)比較有意思的東西，那就是CSS實(shí)現(xiàn)畫板！相信你們?cè)矶级?，那就直接放代碼吧~
<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狀態(tài)管理</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個(gè)li標(biāo)簽 -->
</ul>
</body>
</html>
最終實(shí)現(xiàn)效果就是這樣的，如下圖所示：
CSS畫板
CSS真好玩！ 希望本文講解的思路對(duì)大家有所幫助。
