Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit eae1593

Browse files
zhna123zhna123
committedApr 18, 2023
added animation - keyframe at rule exercise
1 parent a7693f4 commit eae1593

File tree

8 files changed

+178
-0
lines changed

8 files changed

+178
-0
lines changed
 

‎animation/03-dropdown-menu/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Dropdown Menu
2+
3+
We've set up a dropdown menu in this exercise. Load up the page, you can see a single menu title, with a dropdown menu that will open upon clicking on the title.
4+
5+
Your task is to add animation to the dropdown menu so that it will have an effect of growing down. Check out the desired outcome below, and notice the _bounce_ illusion when the dropdown grows close to its final end state.
6+
7+
### Hints
8+
- You need to specify a _transform-origin_ property to make the dropdown menu start transforming from the top
9+
- You need to add an intermediate step to the keyframe at rule to implement the _bounce_ illusion.
10+
11+
## Desired Outcome
12+
13+
![outcome](./desired-outcome.gif)
14+
15+
### Self Check
16+
17+
- The dropdown menu grows down after you click on the menu title
18+
- There's a _bounce_ illusion towards the end of the animation

‎animation/03-dropdown-menu/desired-outcome.gif

242 KB
Loading

‎animation/03-dropdown-menu/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Dropdown Menu</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<div class="dropdown-container">
12+
<div class="menu-title">MENU</div>
13+
<ul class="dropdown-menu">
14+
<li>ITEM 1</li>
15+
<li>ITEM 2</li>
16+
<li>ITEM 3</li>
17+
<li>ITEM 4</li>
18+
<li>ITEM 5</li>
19+
</ul>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎animation/03-dropdown-menu/script.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const dropdownContainer = document.querySelector(".dropdown-container");
2+
const menuTitle = document.querySelector(".menu-title");
3+
const dropdownMenu = document.querySelector(".dropdown-menu");
4+
5+
menuTitle.addEventListener("click", (e) => {
6+
if (e.target === e.currentTarget) {
7+
dropdownMenu.classList.toggle("visible");
8+
}
9+
})
10+
11+
window.addEventListener("click", (e) => {
12+
if (!dropdownContainer.contains(e.target)) {
13+
dropdownMenu.classList.remove("visible")
14+
}
15+
})

‎animation/03-dropdown-menu/solution/solution.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.dropdown-container {
2+
max-width: 250px;
3+
margin: 40px auto;
4+
text-align: center;
5+
line-height: 50px;
6+
font-size: 15px;
7+
color: rgb(247, 247, 247);
8+
cursor: pointer;
9+
}
10+
11+
.menu-title {
12+
background-color: rgb(163, 162, 162);
13+
}
14+
15+
.dropdown-menu {
16+
list-style: none;
17+
padding: 0;
18+
margin: 0;
19+
background-color: rgb(99, 97, 97);
20+
21+
display: none;
22+
}
23+
24+
ul.dropdown-menu li:hover {
25+
background: rgb(47, 46, 46);
26+
}
27+
28+
.visible {
29+
display: block;
30+
}
31+
32+
/* SOLUTION */
33+
34+
.visible {
35+
animation: goDown 500ms ease-in-out;
36+
transform-origin: top;
37+
}
38+
39+
@keyframes goDown {
40+
0% {
41+
transform: scaleY(0);
42+
}
43+
44+
70% {
45+
transform: scaleY(1.1);
46+
}
47+
48+
100% {
49+
transform: scaleY(1);
50+
}
51+
}
52+

‎animation/03-dropdown-menu/solution/solution.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Dropdown Menu</title>
8+
<link rel="stylesheet" href="solution.css" />
9+
</head>
10+
<body>
11+
<div class="dropdown-container">
12+
<div class="menu-title">MENU</div>
13+
<ul class="dropdown-menu">
14+
<li>ITEM 1</li>
15+
<li>ITEM 2</li>
16+
<li>ITEM 3</li>
17+
<li>ITEM 4</li>
18+
<li>ITEM 5</li>
19+
</ul>
20+
</div>
21+
<script src="solution.js"></script>
22+
</body>
23+
</html>

‎animation/03-dropdown-menu/solution/solution.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const dropdownContainer = document.querySelector(".dropdown-container");
2+
const menuTitle = document.querySelector(".menu-title");
3+
const dropdownMenu = document.querySelector(".dropdown-menu");
4+
5+
menuTitle.addEventListener("click", (e) => {
6+
if (e.target === e.currentTarget) {
7+
dropdownMenu.classList.toggle("visible");
8+
}
9+
})
10+
11+
window.addEventListener("click", (e) => {
12+
if (!dropdownContainer.contains(e.target)) {
13+
dropdownMenu.classList.remove("visible")
14+
}
15+
})

‎animation/03-dropdown-menu/style.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.dropdown-container {
2+
max-width: 250px;
3+
margin: 40px auto;
4+
text-align: center;
5+
line-height: 50px;
6+
font-size: 15px;
7+
color: rgb(247, 247, 247);
8+
cursor: pointer;
9+
}
10+
11+
.menu-title {
12+
background-color: rgb(163, 162, 162);
13+
}
14+
15+
.dropdown-menu {
16+
list-style: none;
17+
padding: 0;
18+
margin: 0;
19+
background-color: rgb(99, 97, 97);
20+
21+
display: none;
22+
}
23+
24+
ul.dropdown-menu li:hover {
25+
background: rgb(47, 46, 46);
26+
}
27+
28+
.visible {
29+
display: block;
30+
}
31+
32+

0 commit comments

Comments
 (0)
Failed to load comments.