Как можно такое сделать?

Владимир, почитай про css-mask (недавно как раз на хабре была статья в блоге Т-банка)

Как отображать элементы в зависимости от масштаба содержащего их блока?

спасибо. никогда с таким не сталкивался. сейчас потихоньку раскапываю - для отрисовки используется d3, пошел разбираться с ней

Как отображать элементы в зависимости от масштаба содержащего их блока?

нет, захардкодить не вариант: сервис, который мы делаем - это по сути редактор фотографий звездного неба. пользователи будут грузить туда фотографии, а сервис их обрабатывает и определяет небесные объекты, возвращая данные на клиент. положение объектов в каждом случае будет разным

Анимация градиента рамки input, почему не работает?

Valeriu Vodnicear, тогда добавь alternate, чтобы направление анимации менялось на каждом цикле, тогда не будет рывка. А ещё поиграйся со свойством transform-origin, возможно рывок удастся как-то сгладить

Как заставить Vue-router работать до завершения анимации?

Aetae Виктор Кожухарь спасибо, что откликнулись, помог один из GPT-ботов.

Дело в том, что анимация была добавлена в компонент-страницу (page), то есть в компонент, который был указан в ключе component в роутере, и поэтому блокировала переход между разделами сайта через Vue Router.

Решение проблемы - вынесение div'а с фоном в отдельный компонент и вставка в него содержимого главной страницы через slot

Событие scroll всегда вызывается дважды, как устранить дублирование?

onScroll и должно срабатывать много раз. Но как я понимаю, тебе нужно, чтобы меньше запросов на сервер улетало. Сделай флаг, чтобы отслеживать состояние запроса

const [isLoading, setLoading] = useState(false) // возможно у тебя такое уже есть, может даже в state management

// ... 
if (height < 50 && !isLoading) {           
                      setLoading(true)            
                      alert(height);
                      //loadRows();          
                      setLoading(false)          
                }
// ...

Как добавить CSS-класс в зависимости от location во Vue 3 + TypeScript?

Антон Антон, UPD: добавил этот же код в footer еще раз. Вчера получал warning что использую useRoute() вне компонента router-view, и не работало. Сегодня заработало как надо.
Спасибо за помощь, кинь в ответы, чтобы отметил решением!

Как добавить CSS-класс в зависимости от location во Vue 3 + TypeScript?

Антон Антон, это было первое, что я попробовал

const route = useRoute()
const isGallery = computed(() => route.path.includes('gallery'))

Проблема заключается в том, что когда я обновляю страницу, находясь в галерее, то footer действительно закрепляется, но при переходе на другие страницы остается закреплен. Если же я обновляю страницу на другом маршруте, например на главной странице, то footer не закреплен, но при переходе в галерею он также остается незакрепленным.
Проще говоря, состояние закрепления footer не меняется при переходе между страницами, а мне нужно, чтобы изменялось

Как добавить CSS-класс в зависимости от location во Vue 3 + TypeScript?

Антон Антон, в моем случае поведение не будет отличаться от position: fixed; bottom: 0. Но если вы внимательно еще раз прочитаете вопрос, то поймете, что такой стиль должен работать только для одной страницы - gallery. В остальных случаях закреплять footer нет необходимости, он должен быть внизу прокрутки.

Как добавить CSS-класс в зависимости от location во Vue 3 + TypeScript?

Антон Антон, сложно поспорить - код-то не работает. Но если просто хотите поумничать, то лучше делать это на основном хабре

Как разрешить пути к SVG во Vue-проекте?

Сергей delphinpro,

Можно хранить картинки в src (не знаю, почему вы решили, что нельзя). Тогда пути к ним следует указывать относительные и они будут обрабатываться сборщиком.

вот если коротко, то у меня не обрабатываются. И суть вопроса - сделать так, чтобы обрабатывались )))

Как разрешить пути к SVG во Vue-проекте?

то, что картинки в public - временный костыль, пока я разбираюсь, как сделать по-другому

Как разрешить пути к SVG во Vue-проекте?

а почему вы решили, что я кладу картинку в public? смысл вопроса как раз в том, чтобы svg при разработке лежали в src и были доступны в итоговой сборке. в react такое работает из коробки, во vue не сработало

Как разрешить пути к SVG во Vue-проекте?

в принципе это дело, но я сторонник не включать svg в код как элемент, маски по мне более гибкий способ

Как вернуть JSON-объект из i18n VueJS?

Это понятно, смысл в том, что таких ['1'], ['2'] и тд может быть неопределённое количество, и пока перебор реализую костылями

v-for="i in [1, 2,3,4,5].filter(p => t(`tos.fundamentals.['1'].body`) != `tos.fundamentals.['1'].body`)

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

тогда я даже не знаю, чем помочь

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

И ещё деталь: у вас в описании переменные импортируются без расширения SCSS, а остальные файлы - с ним

// style.scss
@import "/src/base/styles/variables"; // здесь добавить .scss
@import "/src/base/styles/fonts.scss";
@import "/src/base/styles/mixins.scss";
@import "/src/base/styles/generic.scss";

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Вот и я походу уже циклюсь и теряю контекст
Вообще конечно непонятный случай. Можно попробовать копнуть в сторону сборщика (что используете? Webpack? Vite?), посмотреть внимательно конфиг и ещё раз проверить установленные пакеты (sass, sass-loader)

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Тогда вообще не понятно, если говоришь, что до этого так и делал... А chatGPT что говорит?

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Очень странно. А если закомментить 3 строку с ненайденной переменной, что выдаёт?