added transition #1
Conversation
|
|
||
| #container { | ||
| background-color: white; | ||
| border: aqua 10px solid; |
There was a problem hiding this comment.
@christdoesselaere: de border van "container" is nog zichtbaar.
| --menu-bar-height: 10px; | ||
| } | ||
|
|
||
| #container { |
There was a problem hiding this comment.
@christdoesselaere:
Het activatie-kader lijkt nu wat groot: het was de bedoeling om de transitie aan te roepen bij het hoveren over een van de drie balkjes.
In de antwoorden wordt er een width gespecificeerd: width: var(--menu-bar-width), die ontbreekt nog in jouw oplossing;
zie bijlage ter verduidelijking
| } | ||
|
|
||
| #container:hover #menu::before { | ||
| transform: translateY(20px) rotate(45deg); |
There was a problem hiding this comment.
@christdoesselaere: de top parameter van "#container:hover #menu::before " is niet gespecificeerd (zou top: 0;) moeten zijn, maar zie dat je het hebt opgelost in de transform-waarde translateY.
| top: 20px; | ||
| } | ||
|
|
||
| :root { |
There was a problem hiding this comment.
@christdoesselaere: Overzichtelijk geschreven code, makkelijk te reviewen!
| } | ||
|
|
||
| #container:hover #menu::after { | ||
| transform: translateY(-20px) rotate(-45deg); |
There was a problem hiding this comment.
@christdoesselaere: de top parameter van "#container:hover #menu::before " is niet gespecificeerd (zou top: 0;) moeten zijn, maar zie dat je het hebt opgelost in de transform-waarde translateY.
| #menu, | ||
| #menu::before, | ||
| #menu::after { | ||
| transition: all .2s ease-in-out; |
There was a problem hiding this comment.
@christdoesselaere: goede oplossing! Die ga ik van je overnemen
Graag wijzigingen controleren