Как мне анимировать меню пикрилейтед, чтобы при нажатии на ссылку оранжевая полоска плавно переезжала к необходимому пункту меню? (сейчас она прото перескакивает) Я не шарю, помогите молю!
ссылка на сандбокс:
https://codesandbox.io/s/stupefied-ganguly-c1gpo
>ПРОГРАММИСТЫ НА HTML
Тонко. Подрыв пориджков обеспечен.
Задавай transition нужному элементу
У тебя полоска сделана через свойство border-bottom, это свойство не анимируется. Надо менять положение полоски через свойство left и задать transition, чтобы была анимация.
>react
А при чём тут ректал, когда речь про анимацию?
Ты же ролидовый - не понимаешь нихуя, но пытаешься вставить своё дохуя значимое мнение.
> Надо менять положение полоски через свойство left и задать transition, чтобы была анимация.
А как его расчитывать?
Меню должно быть "резиновым" и тянуться в зависимости от браузера, поэтому я сделал его на флексах.
Вычисляешь при инициализации offsetLeft всех элементов меню, создаешь внизу блок-полоску в том же блоке-родителе, по клику меняешь его offsetLeft до нужного элемента меню, можешь еще ширину записывать тоже всех элементов меню и на лету менять и её.
чел выше правильно написал про то, что border не вариант. если тебе нужна полоска, которая катается, то первое и самое тупое, что приходит в голову - сделать отдельный div, навесить рефы на элементы в меню и при клике на пункт брать отступ слева у меню, после чего вешать его через left/transform-translateX на div-индикатор
вернее, у пункта меню, опечатался.
пункт - на котором клик, очевидно
>ПРОГРАММИСТЫ НА HTML
Господи ты, Боже мой.
Ну и да, двигаешь через transform: translateX, про offsetLeft могу проебаться, наверное другую переменную надо будет взять через JS.
>при клике
А если юзер зашёл по ссылке в раздел?
Хуенко. Хтмл и цсс полны по Тьюрингу.
Tебе при сжатии браузера нужно перерасчитывать ширину полоски под активным элементом?
Ну аноны выше пишут, что да.
Эта полоска должна быть по ширине как текст. И при переходе на другую страницу перекатываться с анимацией. А как это сделать я не знаю, уже джва дня с этим мучаюсь
А зачем? Тебе по работе или ты учишься?
Ну раз надо, лови. Цвет только смени на какой нужно.
https://codesandbox.io/s/zealous-snyder-69b8z?file=/src/AppTabs/AppTabs.jsx
А, блядь, removeEventListener забыл в хуке. Сам добавишь?
Охуенно, бро! Спасибо.
Выглядит дико сложно, я думал там пару строчек на CSS можно написать, а вон оно как оказывается.
>removeEventListener забыл в хуке
В useEffect добавить в return?
Анонч, напиши контакты свои, я тебе денег скину.
Алсо как сделать, чтоб при открытии страницы (скажем page2), ползунок уже был на нужном положении? А то он сейчас на первом при открытии любой страницы. Надо получать через хук useLocation роутера и проверять в useEffect во время монтирования компонента табов?
https://codesandbox.io/s/zealous-snyder-69b8z?file=/src/AppTabs/AppTabs.jsx
Вот сам поправил.
>>252332072
Воу, ну пиши в тг @djiaajsdjajo