Skip to content

Commit 9304779

Browse files
author
liujintong
committed
ch14
1 parent 89b8718 commit 9304779

7 files changed

+524
-0
lines changed

ch14/14-10 过渡高度值.html

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
body {
10+
font-family: Arial, Helvetica, sans-serif;
11+
}
12+
13+
.dropdown__toggle {
14+
display: block;
15+
padding: 0.5em 1em;
16+
border: 1px solid hsl(280, 10%, 80%);
17+
color: hsl(280, 30%, 60%);
18+
background-color: white;
19+
font: inherit;
20+
text-decoration: none;
21+
transition: background-color 0.2s linear;
22+
}
23+
24+
.dropdown__toggle:hover {
25+
background-color: hsl(280, 15%, 95%);
26+
}
27+
28+
.dropdown__drawer {
29+
position: absolute;
30+
background-color: white;
31+
width: 10em;
32+
height: 0;
33+
overflow: hidden;
34+
transition: height 0.3s ease-out;
35+
}
36+
37+
.dropdown.is-open .dropdown__drawer {
38+
/* 一个值不能从长度( 0)过渡到 auto */
39+
height: auto;
40+
}
41+
42+
.menu {
43+
padding-left: 0;
44+
margin: 0;
45+
list-style: none;
46+
}
47+
48+
.menu>li+li>a {
49+
border-top: 0;
50+
}
51+
52+
.menu>li>a {
53+
display: block;
54+
padding: 0.5em 1em;
55+
color: hsl(280, 40%, 60%);
56+
background-color: white;
57+
text-decoration: none;
58+
transition: all .2s linear;
59+
border: 1px solid hsl(280, 10%, 80%);
60+
}
61+
62+
.menu>li>a:hover {
63+
background-color: hsl(280, 15%, 95%);
64+
color: hsl(280, 25%, 10%);
65+
}
66+
</style>
67+
</head>
68+
69+
<body>
70+
<div class="dropdown" aria-haspopup="true">
71+
<button class="dropdown__toggle">Menu</button>
72+
<div class="dropdown__drawer">
73+
<ul class="menu" role="menu">
74+
<li role="menuitem">
75+
<a href="/features">Features</a>
76+
</li>
77+
<li role="menuitem">
78+
<a href="/pricing">Pricing</a>
79+
</li>
80+
<li role="menuitem">
81+
<a href="/support">Support</a>
82+
</li>
83+
<li role="menuitem">
84+
<a href="/about">About</a>
85+
</li>
86+
</ul>
87+
</div>
88+
</div>
89+
<p><a href="/read-more">Read more</a></p>
90+
<script type="text/javascript">
91+
(function () {
92+
var toggle = document.querySelector('.dropdown__toggle');
93+
var dropdown = toggle.parentElement;
94+
var drawer = document.querySelector('.dropdown__drawer');
95+
var height = drawer.scrollHeight;
96+
toggle.addEventListener('click', function (e) {
97+
e.preventDefault();
98+
dropdown.classList.toggle('is-open');
99+
if (dropdown.classList.contains('is-open')) {
100+
drawer.style.setProperty('height', height + 'px');
101+
} else {
102+
drawer.style.setProperty('height', 0);
103+
}
104+
});
105+
}());
106+
</script>
107+
</body>
108+
109+
</html>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
.container {
10+
position: relative;
11+
height: 30px;
12+
}
13+
14+
.box {
15+
position: absolute;
16+
left: 0;
17+
height: 30px;
18+
width: 30px;
19+
background-color: hsl(130, 50%, 50%);
20+
transition: all 1s ease-out;
21+
/* transition: all 1s ease-in;
22+
transition: all 1s linear; */
23+
}
24+
25+
.container:hover .box {
26+
left: 400px;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<div class="container">
33+
<div class="box"></div>
34+
</div>
35+
</body>
36+
37+
</html>

ch14/14-5 使用阶跃增加值.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
.container {
10+
position: relative;
11+
height: 30px;
12+
}
13+
14+
.box {
15+
position: absolute;
16+
left: 0;
17+
height: 30px;
18+
width: 30px;
19+
background-color: hsl(130, 50%, 50%);
20+
transition: all 1s steps(3, end);
21+
}
22+
23+
.container:hover .box {
24+
left: 400px;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div class="container">
31+
<div class="box"></div>
32+
</div>
33+
</body>
34+
35+
</html>
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
body {
10+
font-family: Arial, Helvetica, sans-serif;
11+
}
12+
13+
.dropdown__toggle {
14+
display: block;
15+
padding: 0.5em 1em;
16+
border: 1px solid hsl(280, 10%, 80%);
17+
color: hsl(280, 30%, 60%);
18+
background-color: white;
19+
font: inherit;
20+
text-decoration: none;
21+
transition: background-color 0.2s linear;
22+
}
23+
24+
.dropdown__toggle:hover {
25+
background-color: hsl(280, 15%, 95%);
26+
}
27+
28+
.dropdown__drawer {
29+
position: absolute;
30+
display: none;
31+
background-color: white;
32+
width: 10em;
33+
}
34+
35+
.dropdown.is-open .dropdown__drawer {
36+
display: block;
37+
}
38+
39+
.menu {
40+
padding-left: 0;
41+
margin: 0;
42+
list-style: none;
43+
}
44+
45+
.menu>li+li>a {
46+
border-top: 0;
47+
}
48+
49+
.menu>li>a {
50+
display: block;
51+
padding: 0.5em 1em;
52+
color: hsl(280, 40%, 60%);
53+
background-color: white;
54+
text-decoration: none;
55+
transition: all .2s linear;
56+
border: 1px solid hsl(280, 10%, 80%);
57+
}
58+
59+
.menu>li>a:hover {
60+
background-color: hsl(280, 15%, 95%);
61+
color: hsl(280, 25%, 10%);
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
<div class="dropdown" aria-haspopup="true">
68+
<button class="dropdown__toggle">Menu</button>
69+
<div class="dropdown__drawer">
70+
<ul class="menu" role="menu">
71+
<li role="menuitem">
72+
<a href="/features">Features</a>
73+
</li>
74+
<li role="menuitem">
75+
<a href="/pricing">Pricing</a>
76+
</li>
77+
<li role="menuitem">
78+
<a href="/support">Support</a>
79+
</li>
80+
<li role="menuitem">
81+
<a href="/about">About</a>
82+
</li>
83+
</ul>
84+
</div>
85+
</div>
86+
<p><a href="/read-more">Read more</a></p>
87+
<script type="text/javascript">
88+
(function () {
89+
var toggle = document.querySelector('.dropdown__toggle');
90+
var dropdown = toggle.parentElement;
91+
toggle.addEventListener('click', function (e) {
92+
e.preventDefault();
93+
dropdown.classList.toggle('is-open');
94+
});
95+
}());
96+
</script>
97+
</body>
98+
99+
</html>
Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
body {
10+
font-family: Arial, Helvetica, sans-serif;
11+
}
12+
13+
.dropdown__toggle {
14+
display: block;
15+
padding: 0.5em 1em;
16+
border: 1px solid hsl(280, 10%, 80%);
17+
color: hsl(280, 30%, 60%);
18+
background-color: white;
19+
font: inherit;
20+
text-decoration: none;
21+
transition: background-color 0.2s linear;
22+
}
23+
24+
.dropdown__toggle:hover {
25+
background-color: hsl(280, 15%, 95%);
26+
}
27+
28+
.dropdown__drawer {
29+
position: absolute;
30+
background-color: white;
31+
width: 10em;
32+
opacity: 0;
33+
transition: opacity 2s linear;
34+
}
35+
36+
.dropdown.is-open .dropdown__drawer {
37+
opacity: 1;
38+
}
39+
40+
.menu {
41+
padding-left: 0;
42+
margin: 0;
43+
list-style: none;
44+
}
45+
46+
.menu>li+li>a {
47+
border-top: 0;
48+
}
49+
50+
.menu>li>a {
51+
display: block;
52+
padding: 0.5em 1em;
53+
color: hsl(280, 40%, 60%);
54+
background-color: white;
55+
text-decoration: none;
56+
transition: all .2s linear;
57+
border: 1px solid hsl(280, 10%, 80%);
58+
}
59+
60+
.menu>li>a:hover {
61+
background-color: hsl(280, 15%, 95%);
62+
color: hsl(280, 25%, 10%);
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<div class="dropdown" aria-haspopup="true">
69+
<button class="dropdown__toggle">Menu</button>
70+
<div class="dropdown__drawer">
71+
<ul class="menu" role="menu">
72+
<li role="menuitem">
73+
<a href="/features">Features</a>
74+
</li>
75+
<li role="menuitem">
76+
<a href="/pricing">Pricing</a>
77+
</li>
78+
<li role="menuitem">
79+
<a href="/support">Support</a>
80+
</li>
81+
<li role="menuitem">
82+
<a href="/about">About</a>
83+
</li>
84+
</ul>
85+
</div>
86+
</div>
87+
<p><a href="/read-more">Read more</a></p>
88+
<script type="text/javascript">
89+
(function () {
90+
var toggle = document.querySelector('.dropdown__toggle');
91+
var dropdown = toggle.parentElement;
92+
toggle.addEventListener('click', function (e) {
93+
e.preventDefault();
94+
dropdown.classList.toggle('is-open');
95+
});
96+
}());
97+
</script>
98+
</body>
99+
100+
</html>

0 commit comments

Comments
 (0)