added transition#1
Conversation
s-elshot
left a comment
s-elshot
left a comment
There was a problem hiding this comment.
Hi Christ,
Hierbij mijn review van je code. Het ziet er goed uit en heb een paar kleine opmerkingen, maar ik denk dat je die zelf ook wel doorhad.
groet,
Stephan
|
|
||
| #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
2 participants
Graag wijzigingen controleren