Kop 1

Inleiding

In deze opdracht werk je met CSS-transitions.
De animatie wordt in CSS afgehandeld en ontstaat doordat er een class van een element wordt veranderd.
Deze verandering van class-naam wordt door een click-event in JS aangeroepen.
De toegevoegde class-naam is volgens de BEM naamconventie met een modifier.
De transition heeft een snelheidseffect welke met cubic-Bezier kan worden aangepast: http://cubic-bezier.com/#.17,.67,.83,.67.

Leerdoelen

Je laat in deze training het volgende zien:

• CSS transitions
• click-event JS
• element.classList eigenschap in JS https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
• easing in transitions met cubic-Bezier
• modifier class in BEM naamconventie
• :nth-child()-selectie

opdracht

1. Bestudeer de video instructie hiernaast: https://youtu.be/l6-fBB_lMvg.
   Deze laat alle leer-elementen zien.
2. Bekijk de video daaronder: https://www.youtube.com/watch?time_continue=1&v=ew-9yvrzSsI. Deze laat zien wat je met deze kennis vervolgens zou kunnen maken: een verborgen menu dat met een mooie terugslag invliegt.
3. Bedenk zelf hoe de documentstructuur dan moet zijn en de class-namen die worden toegevoegd of weggehaald.
4. Het na-ijleffect ontstaat doordat je in de CSS de opeenvolgende items selecteert met :nth-child()-selector.
   Elk van deze elementen geef je een steeds grotere transition-delay.

Inleveren

• Voeg validatie linkjes toe in een footer van jouw training. Haal ze bijvoorbeeld bij: https://github.com/Theo-denBlanken/validatie-W3C
• Na afloop plaats je deze training online in je bewijzenmap.
• Valideer jouw pagina's.
• Plaats jouw repository op GitHub. In de README.md van deze repository is een link naar de live-versie van deze training
• Plaats de GitHub-link in ELO Magister bij opdracht FRO JS-CSS animatie.