<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="a" id="f">
<div class="c"></div>
<div class="b">
<button onclick="wf()">
asd
</button></div>
</div>
<script>
function wf() {
if(document.getElementById('f').className =="a"|| document.getElementById('f').className=="a e")
{document.getElementById('f').className = "a d"}
else {
document.getElementById('f').className = "a e"
}
}
</script>
<style>
*{
margin: 0;padding: 0;
}
.a {
display: grid;
grid-template-columns: 200px auto;
position: fixed;
height: 100%;
width: 100%;
}
.d {
animation: test 0.3s;
animation-fill-mode:forwards
}
.e {
animation: test1 0.3s;
animation-fill-mode:forwards
}
@keyframes test1{
0% { grid-template-columns: 80px auto }
1% { grid-template-columns: 81.2px auto }
2% { grid-template-columns: 82.4px auto }
3% { grid-template-columns: 83.6px auto }
4% { grid-template-columns: 84.8px auto }
5% { grid-template-columns: 86px auto }
6% { grid-template-columns: 87.2px auto }
7% { grid-template-columns: 88.4px auto }
8% { grid-template-columns: 89.6px auto }
9% { grid-template-columns: 90.8px auto }
10% { grid-template-columns: 92px auto }
11% { grid-template-columns: 93.2px auto }
12% { grid-template-columns: 94.4px auto }
13% { grid-template-columns: 95.6px auto }
14% { grid-template-columns: 96.8px auto }
15% { grid-template-columns: 98px auto }
16% { grid-template-columns: 99.2px auto }
17% { grid-template-columns: 100.4px auto }
18% { grid-template-columns: 101.6px auto }
19% { grid-template-columns: 102.8px auto }
20% { grid-template-columns: 104px auto }
21% { grid-template-columns: 105.2px auto }
22% { grid-template-columns: 106.4px auto }
23% { grid-template-columns: 107.6px auto }
24% { grid-template-columns: 108.8px auto }
25% { grid-template-columns: 110px auto }
26% { grid-template-columns: 111.2px auto }
27% { grid-template-columns: 112.4px auto }
28% { grid-template-columns: 113.6px auto }
29% { grid-template-columns: 114.8px auto }
30% { grid-template-columns: 116px auto }
31% { grid-template-columns: 117.19999999999999px auto }
32% { grid-template-columns: 118.4px auto }
33% { grid-template-columns: 119.6px auto }
34% { grid-template-columns: 120.8px auto }
35% { grid-template-columns: 122px auto }
36% { grid-template-columns: 123.19999999999999px auto }
37% { grid-template-columns: 124.4px auto }
38% { grid-template-columns: 125.6px auto }
39% { grid-template-columns: 126.8px auto }
40% { grid-template-columns: 128px auto }
41% { grid-template-columns: 129.2px auto }
42% { grid-template-columns: 130.4px auto }
43% { grid-template-columns: 131.6px auto }
44% { grid-template-columns: 132.8px auto }
45% { grid-template-columns: 134px auto }
46% { grid-template-columns: 135.2px auto }
47% { grid-template-columns: 136.4px auto }
48% { grid-template-columns: 137.6px auto }
49% { grid-template-columns: 138.8px auto }
50% { grid-template-columns: 140px auto }
51% { grid-template-columns: 141.2px auto }
52% { grid-template-columns: 142.4px auto }
53% { grid-template-columns: 143.6px auto }
54% { grid-template-columns: 144.8px auto }
55% { grid-template-columns: 146px auto }
56% { grid-template-columns: 147.2px auto }
57% { grid-template-columns: 148.39999999999998px auto }
58% { grid-template-columns: 149.6px auto }
59% { grid-template-columns: 150.8px auto }
60% { grid-template-columns: 152px auto }
61% { grid-template-columns: 153.2px auto }
62% { grid-template-columns: 154.39999999999998px auto }
63% { grid-template-columns: 155.6px auto }
64% { grid-template-columns: 156.8px auto }
65% { grid-template-columns: 158px auto }
66% { grid-template-columns: 159.2px auto }
67% { grid-template-columns: 160.39999999999998px auto }
68% { grid-template-columns: 161.6px auto }
69% { grid-template-columns: 162.8px auto }
70% { grid-template-columns: 164px auto }
71% { grid-template-columns: 165.2px auto }
72% { grid-template-columns: 166.39999999999998px auto }
73% { grid-template-columns: 167.6px auto }
74% { grid-template-columns: 168.8px auto }
75% { grid-template-columns: 170px auto }
76% { grid-template-columns: 171.2px auto }
77% { grid-template-columns: 172.39999999999998px auto }
78% { grid-template-columns: 173.6px auto }
79% { grid-template-columns: 174.8px auto }
80% { grid-template-columns: 176px auto }
81% { grid-template-columns: 177.2px auto }
82% { grid-template-columns: 178.39999999999998px auto }
83% { grid-template-columns: 179.6px auto }
84% { grid-template-columns: 180.8px auto }
85% { grid-template-columns: 182px auto }
86% { grid-template-columns: 183.2px auto }
87% { grid-template-columns: 184.39999999999998px auto }
88% { grid-template-columns: 185.6px auto }
89% { grid-template-columns: 186.8px auto }
90% { grid-template-columns: 188px auto }
91% { grid-template-columns: 189.2px auto }
92% { grid-template-columns: 190.39999999999998px auto }
93% { grid-template-columns: 191.6px auto }
94% { grid-template-columns: 192.8px auto }
95% { grid-template-columns: 194px auto }
96% { grid-template-columns: 195.2px auto }
97% { grid-template-columns: 196.39999999999998px auto }
98% { grid-template-columns: 197.6px auto }
99% { grid-template-columns: 198.8px auto }
100% { grid-template-columns: 200px auto }
}
@keyframes test {
0% { grid-template-columns: 200px auto }
1% { grid-template-columns: 198.8px auto }
2% { grid-template-columns: 197.6px auto }
3% { grid-template-columns: 196.4px auto }
4% { grid-template-columns: 195.2px auto }
5% { grid-template-columns: 194px auto }
6% { grid-template-columns: 192.8px auto }
7% { grid-template-columns: 191.6px auto }
8% { grid-template-columns: 190.4px auto }
9% { grid-template-columns: 189.2px auto }
10% { grid-template-columns: 188px auto }
11% { grid-template-columns: 186.8px auto }
12% { grid-template-columns: 185.6px auto }
13% { grid-template-columns: 184.4px auto }
14% { grid-template-columns: 183.2px auto }
15% { grid-template-columns: 182px auto }
16% { grid-template-columns: 180.8px auto }
17% { grid-template-columns: 179.6px auto }
18% { grid-template-columns: 178.4px auto }
19% { grid-template-columns: 177.2px auto }
20% { grid-template-columns: 176px auto }
21% { grid-template-columns: 174.8px auto }
22% { grid-template-columns: 173.6px auto }
23% { grid-template-columns: 172.4px auto }
24% { grid-template-columns: 171.2px auto }
25% { grid-template-columns: 170px auto }
26% { grid-template-columns: 168.8px auto }
27% { grid-template-columns: 167.6px auto }
28% { grid-template-columns: 166.4px auto }
29% { grid-template-columns: 165.2px auto }
30% { grid-template-columns: 164px auto }
31% { grid-template-columns: 162.8px auto }
32% { grid-template-columns: 161.6px auto }
33% { grid-template-columns: 160.4px auto }
34% { grid-template-columns: 159.2px auto }
35% { grid-template-columns: 158px auto }
36% { grid-template-columns: 156.8px auto }
37% { grid-template-columns: 155.6px auto }
38% { grid-template-columns: 154.4px auto }
39% { grid-template-columns: 153.2px auto }
40% { grid-template-columns: 152px auto }
41% { grid-template-columns: 150.8px auto }
42% { grid-template-columns: 149.6px auto }
43% { grid-template-columns: 148.4px auto }
44% { grid-template-columns: 147.2px auto }
45% { grid-template-columns: 146px auto }
46% { grid-template-columns: 144.8px auto }
47% { grid-template-columns: 143.6px auto }
48% { grid-template-columns: 142.4px auto }
49% { grid-template-columns: 141.2px auto }
50% { grid-template-columns: 140px auto }
51% { grid-template-columns: 138.8px auto }
52% { grid-template-columns: 137.6px auto }
53% { grid-template-columns: 136.4px auto }
54% { grid-template-columns: 135.2px auto }
55% { grid-template-columns: 134px auto }
56% { grid-template-columns: 132.8px auto }
57% { grid-template-columns: 131.60000000000002px auto }
58% { grid-template-columns: 130.4px auto }
59% { grid-template-columns: 129.2px auto }
60% { grid-template-columns: 128px auto }
61% { grid-template-columns: 126.8px auto }
62% { grid-template-columns: 125.60000000000001px auto }
63% { grid-template-columns: 124.4px auto }
64% { grid-template-columns: 123.2px auto }
65% { grid-template-columns: 122px auto }
66% { grid-template-columns: 120.8px auto }
67% { grid-template-columns: 119.60000000000001px auto }
68% { grid-template-columns: 118.4px auto }
69% { grid-template-columns: 117.2px auto }
70% { grid-template-columns: 116px auto }
71% { grid-template-columns: 114.8px auto }
72% { grid-template-columns: 113.6px auto }
73% { grid-template-columns: 112.4px auto }
74% { grid-template-columns: 111.2px auto }
75% { grid-template-columns: 110px auto }
76% { grid-template-columns: 108.8px auto }
77% { grid-template-columns: 107.60000000000001px auto }
78% { grid-template-columns: 106.4px auto }
79% { grid-template-columns: 105.2px auto }
80% { grid-template-columns: 104px auto }
81% { grid-template-columns: 102.8px auto }
82% { grid-template-columns: 101.60000000000001px auto }
83% { grid-template-columns: 100.4px auto }
84% { grid-template-columns: 99.2px auto }
85% { grid-template-columns: 98px auto }
86% { grid-template-columns: 96.8px auto }
87% { grid-template-columns: 95.60000000000001px auto }
88% { grid-template-columns: 94.4px auto }
89% { grid-template-columns: 93.2px auto }
90% { grid-template-columns: 92px auto }
91% { grid-template-columns: 90.8px auto }
92% { grid-template-columns: 89.60000000000001px auto }
93% { grid-template-columns: 88.4px auto }
94% { grid-template-columns: 87.2px auto }
95% { grid-template-columns: 86px auto }
96% { grid-template-columns: 84.80000000000001px auto }
97% { grid-template-columns: 83.60000000000001px auto }
98% { grid-template-columns: 82.4px auto }
99% { grid-template-columns: 81.2px auto }
100% { grid-template-columns: 80px auto }
}
.b {
background-color: red;
height: 100%;
width: 100%;
}
.c {
background-color: green;
height: 100%;
width: 100%;
}
</style>
</body>
</html>
# 请问有没有别的办法
