Всем добрый вечер, господа и дамы. Есть задача, пока не

Question

Всем добрый вечер, господа и дамы. Есть задача, пока не

придумал как решить.

Значит есть блок на весь экран на весь экран. В нем 2 блока: один с заголовком и второй с импутом. Блок с импут width: 100%;
После нажатия на импут он должен плавно перекрыть блок с заголовком (то есть инпут занимает всю ширину экрана условно). И вот не знаю как это анимировать.
Без анимации реализовывал через позицианирвоание, и еще через гриды и ограничение общего контейнера по высоте в 1 строку + скрывал все что не влезает. Но ни какой вариант не поулчается анимировать. В интернете не нашел вариант

https://codepen.io/baurinvladislav/pen/ZEoNavV - песочница с примером

Есть идеи как сделать? Или модет у этого эффекта есть название, по которому можно было бы найти реализацию

#css #frontend #html #programming #russian

0

18.10.2022

11 ответов

12 просмотров

Maksym

кароч, присваивай класс для инпута по событию фокус, при самой стилизации инпута дай ему transition: 0.5s all; а в классе, который ты будешь добавлять просто сделай transform: translateX(-твое нужное значение(можешь взять размер тайтла))

0

18.10.2022

Maksym

Maksym
кароч, присваивай класс для инпута по событию фоку...

это онли через жс делается

0

18.10.2022

Владислав Баурин Автор вопроса

Maksym
кароч, присваивай класс для инпута по событию фоку...

так прикол в том что нужно адаптивено. Если ток через js получать размеры заголовка

0

18.10.2022

Maksym

Владислав Баурин
так прикол в том что нужно адаптивено. Если ток че...

хотяя

0

18.10.2022

Владислав Баурин Автор вопроса

Rustem
https://codepen.io/aaroniker/pen/XyXzYp Типо такое...

Да это я знаю. Тут прикол в том, что ты знаешь размер изначальны и конечный. И они фиксированные. А тут изначально инпут занимает все свободное пространство: а потом по вверх заголовка все возможное пространство

0

18.10.2022

Rustem

Владислав Баурин
Да это я знаю. Тут прикол в том, что ты знаешь раз...

высчитать ширину заголовка и прибавлять это в инпут

0

18.10.2022

Maksym

Rustem
высчитать ширину заголовка и прибавлять это в инпу...

фигня

0

18.10.2022