How to animate the bar correctly?

Question

I have two buttons, when the user clicks on them, it is underlined. However, I would like .underline to be animated / slide horizontally to the button the button is pressed on.

Demo: https://jsfiddle.net/ds1wr736/11/

As now, under the button appears and disappears when the button is pressed. How can I animate this to smoothly slide (change x values) onto a selected button without hacks and jQuery?

function switchTab(tab) { if (tab === 1) { document.getElementById("tab2").classList.add("underline"); document.getElementById("tab1").classList.remove("underline"); } else if (tab === 2) { document.getElementById("tab1").classList.add("underline"); document.getElementById("tab2").classList.remove("underline"); } } 

 .bar { background-color: gray; padding: 20px; } .underline { border-bottom: 5px solid red; } button { width: 100px; height: 50px; background-color: white; } button:focus { outline: none; } 

 <div class="bar"> <button id='tab1' class="underline" onclick='switchTab(2)'>Tab 1</button> <button id='tab2' onclick='switchTab(1)'>Tab 2</button> </div> 

Answer 1

Instead of animating the border, I created an additional element that responds to click events. This allows us to track the position of the underline and zoom and animate it between the buttons when pressed.

This can be changed to accept hover events instead of mouseover instead of click .

 let buttons = document.querySelectorAll('button'); buttons.forEach(button => { button.addEventListener('mouseover', hoverboard); // Hover event //button.addEventListener('click', hoverboard); }); function hoverboard(e) { const board = document.querySelector('.hoverboard'); // - 1 due to the border of the button let width = this.offsetWidth - 1; const firstChild = document.querySelector('.bar button:first-child'); const lastChild = document.querySelector('.bar button:last-child'); // - 19 due to padding being 20px on the left and removing 1 for the button border let left = this.offsetLeft - 19; board.style.cssText = 'transform: translateX(' + left + 'px); width: ' + width + 'px;'; } 

 .bar { position: relative; background-color: gray; padding: 20px; } .underline { border-bottom: 5px solid red; } button { width: 100px; height: 50px; background-color: white; } button:focus { outline: none; } .hoverboard { position: absolute; width: 100px; height: 3px; background: red; transition: transform .25s ease, width .25s ease; } 

 <div class="bar"> <button id='tab1'>Tab 1</button> <button id='tab2' style="width: 65px;">Tab 2</button> <button>Tab 3</button> <div class="hoverboard"></div> </div> 

Answer 2

Here I go. Only edited classes are available here:

 .underline:after { border-bottom: 5px solid red; animation-name: slideIn; animation-duration: 1s; width: 100%; content: ''; position: absolute; bottom: 0; left: 0; } @keyframes slideIn { from {width: 0;} to {width: 100%;} } button{ position: relative; width: 100px; height: 50px; background-color: white; } 

What I did was that I used the abstract after element on the buttons and positioned it absolute relative to the relative button. And the css animation is used.