-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
22 lines (17 loc) · 688 Bytes
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const bubble = document.querySelector(".bubble");
const tabs = document.querySelector(".tabs");
tabs.addEventListener("mouseenter", e => {
setTimeout(() => bubble.style.transition = "transform 200ms ease-out, left 300ms ease-out", 5);
bubble.style.transform = "scale(1,1) translateX(-25%)";
})
tabs.addEventListener("mouseleave", e => {
bubble.style.transition = "transform 200ms ease-out";
bubble.style.transform = "scale(1,0) translateX(-25%)";
})
tabs.addEventListener("mouseover", e => {
e.target.classList.add("hover");
bubble.style.left = e.target.offsetLeft+"px";
})
tabs.addEventListener("mouseout", e => {
e.target.classList.remove("hover");
})