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

Changed to use word expand to describe menu animations

This commit is contained in:
zhna123 2023-04-20 21:04:32 -04:00
parent eae15934bf
commit 84e732112c
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
animation/03-dropdown-menu/README.md
View File

@ -2,7 +2,7 @@
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. 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 growing down. Check out the desired outcome below, and notice the _bounce_ illusion when the dropdown grows close to its final end state. 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 ### Hints
- You need to specify a _transform-origin_ property to make the dropdown menu start transforming from the top - You need to specify a _transform-origin_ property to make the dropdown menu start transforming from the top
@ -14,5 +14,5 @@ Your task is to add animation to the dropdown menu so that it will have an effec
### Self Check ### Self Check
- The dropdown menu grows down after you click on the menu title - The dropdown menu expands after you click on the menu title
- There's a _bounce_ illusion towards the end of the animation - There's a _bounce_ illusion towards the end of the animation

4
animation/03-dropdown-menu/solution/solution.css
View File

@ -32,11 +32,11 @@ ul.dropdown-menu li:hover {
/* SOLUTION */ /* SOLUTION */
.visible { .visible {
animation: goDown 500ms ease-in-out; animation: expand 500ms ease-in-out;
transform-origin: top; transform-origin: top;
} }
@keyframes goDown { @keyframes expand {
0% { 0% {
transform: scaleY(0); transform: scaleY(0);
} }