tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #306 from zhna123/keyframe_exercise 

Keyframes-Practice: Added a keyframe at rule exercise
This commit is contained in:
Cody Loyd 2023-04-21 10:40:03 -05:00 committed by GitHub
parent a7693f4b80 84e732112c
commit e7c367d6d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 178 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
animation/03-dropdown-menu/README.md Normal file
View File

@ -0,0 +1,18 @@
# Dropdown Menu
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.
Your task is to add animation to the dropdown menu so that it will have an effect of expanding. Check out the desired outcome below, and notice the _bounce_ illusion when the dropdown expands close to its final end state.
### Hints
- You need to specify a _transform-origin_ property to make the dropdown menu start transforming from the top
- You need to add an intermediate step to the keyframe at rule to implement the _bounce_ illusion.
## Desired Outcome
![outcome](./desired-outcome.gif)
### Self Check
- The dropdown menu expands after you click on the menu title
- There's a _bounce_ illusion towards the end of the animation

BIN
animation/03-dropdown-menu/desired-outcome.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

23
animation/03-dropdown-menu/index.html Normal file
View File

@ -0,0 +1,23 @@
<!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>Dropdown Menu</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="dropdown-container">
<div class="menu-title">MENU</div>
<ul class="dropdown-menu">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>

15
animation/03-dropdown-menu/script.js Normal file
View File

@ -0,0 +1,15 @@
const dropdownContainer = document.querySelector(".dropdown-container");
const menuTitle = document.querySelector(".menu-title");
const dropdownMenu = document.querySelector(".dropdown-menu");
menuTitle.addEventListener("click", (e) => {
if (e.target === e.currentTarget) {
dropdownMenu.classList.toggle("visible");
}
})
window.addEventListener("click", (e) => {
if (!dropdownContainer.contains(e.target)) {
dropdownMenu.classList.remove("visible")
}
})

52
animation/03-dropdown-menu/solution/solution.css Normal file
View File

@ -0,0 +1,52 @@
.dropdown-container {
max-width: 250px;
margin: 40px auto;
text-align: center;
line-height: 50px;
font-size: 15px;
color: rgb(247, 247, 247);
cursor: pointer;
}
.menu-title {
background-color: rgb(163, 162, 162);
}
.dropdown-menu {
list-style: none;
padding: 0;
margin: 0;
background-color: rgb(99, 97, 97);
display: none;
}
ul.dropdown-menu li:hover {
background: rgb(47, 46, 46);
}
.visible {
display: block;
}
/* SOLUTION */
.visible {
animation: expand 500ms ease-in-out;
transform-origin: top;
}
@keyframes expand {
0% {
transform: scaleY(0);
}
70% {
transform: scaleY(1.1);
}
100% {
transform: scaleY(1);
}
}

23
animation/03-dropdown-menu/solution/solution.html Normal file
View File

@ -0,0 +1,23 @@
<!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>Dropdown Menu</title>
<link rel="stylesheet" href="solution.css" />
</head>
<body>
<div class="dropdown-container">
<div class="menu-title">MENU</div>
<ul class="dropdown-menu">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
<script src="solution.js"></script>
</body>
</html>

15
animation/03-dropdown-menu/solution/solution.js Normal file
View File

@ -0,0 +1,15 @@
const dropdownContainer = document.querySelector(".dropdown-container");
const menuTitle = document.querySelector(".menu-title");
const dropdownMenu = document.querySelector(".dropdown-menu");
menuTitle.addEventListener("click", (e) => {
if (e.target === e.currentTarget) {
dropdownMenu.classList.toggle("visible");
}
})
window.addEventListener("click", (e) => {
if (!dropdownContainer.contains(e.target)) {
dropdownMenu.classList.remove("visible")
}
})

32
animation/03-dropdown-menu/style.css Normal file
View File

@ -0,0 +1,32 @@
.dropdown-container {
max-width: 250px;
margin: 40px auto;
text-align: center;
line-height: 50px;
font-size: 15px;
color: rgb(247, 247, 247);
cursor: pointer;
}
.menu-title {
background-color: rgb(163, 162, 162);
}
.dropdown-menu {
list-style: none;
padding: 0;
margin: 0;
background-color: rgb(99, 97, 97);
display: none;
}
ul.dropdown-menu li:hover {
background: rgb(47, 46, 46);
}
.visible {
display: block;
}