This tutorial shows how to build a link navigator micro-animation
UI element like Stripe's.
It mixes JavaScript and CSS to transition a tooltip background behind a
navigation dropdown list. The dropdown element has two events for transitions,
.trigger-enter
and .trigger-enter-active
, while the tooltip has only an
.open
transition.
/* dropdown list */
.trigger-enter .dropdown {
display: block;
}
.trigger-enter-active .dropdown {
opacity: 1;
}
/* tooltip */
.dropdownBackground.open {
opacity: 1;
}
Some concepts taught:
- revisioning
getBoundingClientRect()
which returns aDOMRect
with an objects complete bounding box coordinates - setting properties with
ES6 template literals
event
delegation and order
// set the second class after a delay only if the first has not been removed
this.classList.add('trigger-enter')
setTimeout(() =>
this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150)