Как зделать анимацию фона кнопки, чтоб фон передвигался от последней нажатой кнопке к нажатой последний раз?

Question

[Pantene742]

хотелось бы чтоб фон передвигался от одной к другой
ЕСЛИ ТОЧНО НЕ ПОМНИТЕ КАК ЭТО ДЕЛАЕТСЯ, ДАЙТЕ ХОТЯ БЫНАВОДКУ КАК ЭТО ЗАГУГЛИТЬ
Я ЗА ЧАС ГУГЛЕНИЯ НИЧЕГО НЕ НАШЕЛ.
Хотелось бы это реализовать используя jquery и bootstrap так как они уже подключены в Angular проэкт.

<div class="col text-right">
          <div  class="row period-selector pull-right">
           ><div class="col">
              1D
            </div><div class="col">
              1W
            </div><div class="col active">
              1M
            </div><div class="col">
              QTD
            </div><div class="col">
              YTD
            </div>
          </div>
        </div>

Comments

[Артур]

можно подробнее ? я не понял что значит ?
чтоб фон передвигался от последней нажатой кнопке к нажатой последний раз?
что фон был там где вы нажмете в последния раз?

[Pantene742]

Артур, не могу найти сайты с примерами. Пердположим мы нажали на одну кнопку и под ней появился фон. Нажали потом на кнопку правее или левее и вон не просто погас под последней нажатой и появился под нажатой впоследнее. А как бы передвинулся от одной под дргую. Я использую Angular5 и в нем есть подключен jQuery.

Надо это попытатся сделать при помощи jQuery или Bootstrap.

[Сергей delphinpro]

фону пишете transition 0.3s ease left;
потом просто меняете позицию left на нужную.

[Артур]

Сергей delphinpro, и как это сработает?

[Сергей delphinpro]

Артур,
https://jsfiddle.net/t2jq9e5a/
https://jsfiddle.net/t2jq9e5a/1/ — тут побольше элементов

[Артур]

Сергей delphinpro, хорошая идея

[Pantene742]

Все большое спасибо ))

Answer 1

[Артур]

Вот нашел
https://codepen.io/alexsafayan/pen/srwEo

сейчас она с hover работает тебе немного подправить надо ,думаю это не проблема.

PS по скольку мой ответ указан как решение дополню его примерами Сергей delphinpro, которые советую использовать
https://jsfiddle.net/t2jq9e5a/
https://jsfiddle.net/t2jq9e5a/1/ — тут побольше элементов

Comments

[Pantene742]

ему стоило ставить в ответ. Очень часто бред пишут в ответы, а реально помагают в коментарии где не поднимешь статус

[Pantene742]

Проблема была решена способом с jQuery но так как это все встраивалось в bootstrap btn-group пришлось
средствами jQuery вымерять ширину кнопок и задать ее div блоку с фоном. Это помогло добится абсолютной адаптивности.