Как сделать анимацию для подчеркивания?

Question

[Magnus Keef]

Привет. Есть вот такие табы
Зеленое подчеркивание это border-bottom у каждой вкладки. Нужно сделать так, чтобы при переключении черта плавно переходила на активную вкладку.
Здесь пример того, как это должно выглядеть
Этот пример к сожалению для приложений на swift. А для web я таких примеров не могу найти((((

P.S. Подумываю вообще сменить этот таб на более простой, но не могу найти ничего более лучшего. Если у вас есть в запасе подобные библиотеки, буду признателен. Хотелось бы найти адаптивные табы, но шапка чтоб была в виде слайдера Пример

Answer 1

[real2210]

Когда то давно делал на JQ может вас устроит

Answer 2

[Павел Чесноков]

https://codepen.io/mnafricano/pen/jcrzm

Comments

[Андрей]

а теперь попробуйте поменять текст

Answer 3

[Максим Тимофеев]

Зеленое подчеркивание это border-bottom у каждой вкладки. Нужно сделать так, чтобы при переключении черта плавно переходила на активную вкладку.

Делаем с помощью js и span например, иначе никак. Можно конечно и с border-bottom изратиться, но зачем?
Ловите клик по табу, читаете ширину ссылки таба и ее позицию, формируете анимацию.

Answer 4

[Андрей]

Если ширина разная то только с js. если одинаковая то можно и на чистом css сделать. но это вносит ряд ограничений. вам поможет гугл и фраза "lavalamp menu js"