Как сделать трансформацию линии при перемещении отностительно оси X?

Question

[Aleksander911]

Доброй ночи всем.
Имеется линия, которая двигается относительно оси X влево и вправо

Подскажите как сделать так чтобы в момент движения линия удлинялась в ту сторону, в которую двигается, а при остановке сжималась обратно?
PS: движение задается относительно left.

Comments

[Анатолий]

Без кода в песочнице вам никто не поможет, а вангуют на другом форуме.
— Aleksander911

В чужом глазу соринку видим, а в своём и бревна не замечаем.

[Aleksander911]

Анатолий, линия перемещается вправо, когда ее позиция left увеличивает свое значение и перемещается влево, когда позиция left уменьшает свое значение с анимацией transition:)

[Aleksander911]

Анатолий, в принципе я уже понял, что без JS здесь не обойтись. Нужна проверка увеличивается или уменьшается ли значение, исходя из этого добавлять разные class родителю и применять разные анимации.

[ProjectSoft]

Aleksander911, вы бы показали что пытались сделать.
Да, без JS не обойтись. Плагин должен определить активный или наведённый li, при этом наведённый в приоритете. Определить его позицию и ширину, задать эти значения для вложенного в ul span, на который уже стилями определено свойство transition transition: left .3s ease, width .3s ease;.
Теоретическая логика построена. Осталось только внедрить в практику.

Answer 1

[Алексей]

Можно позаимствовать идеи, или взять уже готовое решение - https://www.jqueryscript.net/menu/Magic-Line-Navig...

Answer 2

[Anton fon Faust]

Решение в лоб:
1) изучаете инструкции css @keyframes
2) создаете анимацию для каждого варианта перехода (с первого на второй, с первого на третий, со второго на первый, со второго на третий, с третьего на второй, с третьего на первый)
3) оборачиваете меню в контейнер, вешаете на этот контейнер обработчик события onmouseover, в нем запоминаете последнее положение и в зависимости от того, какой e.target применяете нужный класс с анимацией (саму полосочку можно сделать как с помощью обычных элементов, так и с помощью псевдоэлементов).