CSS ANIMATION : Transition

01. Trigger is pseudo-class

Important :

Transition is in css of element, not on it’s trigger.

property : what is being transformed/transitioned ?
duration : how long does the transition takes ?
ease : variations in timing during duration (ease-in or out or bézier)
delay : how long to wait before the transition may start

<div id="box"></div>

#box {
display: inline-block;
background: yellow;
width: 200px;
height: 200px;
transition: transform 30ms ease-in-out;

}
#box:hover {
transform: translate(200px, 150px), rotate(30deg);
}

Problem : when moving target is hovered, gives weird behaviour .
Solution : offload hover to other element.

<div id="trigger">
<div id="box"></div>
</div>

#trigger {
width: 200px;
height: 200px;
background: #ddd;
}
#box {
background: yellow;
display: inline-block;
width: 200px;
height: 200px;
transition: transform 30ms ease-in-out;
/* belangrijke en goeie */
pointer-events: none;
}
/* als trigger gehoverd wordt, transformed box */
#trigger:hover #box{
transform: translate(200px, 150px), rotate(30deg);
}

Tip 001 : Chrome -> Inspector -> ease-editor

Tip 002 : pointer-events : none; //comes in handy when you don’t want things to interact
mozilla.org/CSS/pointer-events

Trigger is class change

!!! hover class wordt clicked ipv hover.

#trigger {
width: 200px;
height: 200px;
background: #ddd;
}
#box {
background: yellow;
display: inline-block;
width: 200px;
height: 200px;
transition: transform 30ms ease-in-out;
/* belangrijke en goeie */
pointer-events: none;
}
/* als trigger geclicked wordt, transformed box */
#trigger:clicked #box{
transform: translate(200px, 150px), rotate(30deg);
}

TODO !!! Te testen want het is zonder check

// variabele maken van de te klikken zaak
let trigger = getElementById('trigger');
// eventlistener aan vasthangen en class clicked maken
trigger.addEventListener(onclick, function(e){
   this.classList.toggle = 'clicked';
});