Анимация при наведении — выпад блоков, как сделать?
Выглядит вот так:
При наведении происходит следующее:
Всё это естественное под транзишном, медленно появляется( верхний красный блок сверху выпадает, как стикер )
Как это сделать?
Вот что у меня:
При наведении:
Всё криво и не плавно
все это через CSS пишется, вам надо сделать абсолютно позиционированный элемент относительно контейнера растянуть его на весь родительский через w100%, h100%. Дать ему полупрозрачный бэкграунд.
при ховере его прозрачность становится 1, изначально 0. Стикер кладете в контейнер задаете ему абсолютное позиционирование, display: none и transitionY(-50px) например, при ховере на контейнер - стикер становится display: block и transitionY какой Вам нужен
Alexander Frontend - Developer, скорее всего это из-за display: none, он вырубает все transition на элементе, тогда ставь opacity: 0, а при клике opacity: 1
Alexander Frontend - Developer, скорее всего ты переписал не совсем так, как я предложил, мне честно не очень удобно ковыряться в коде
Ещё раз:
1) Создай два дива внутри родительского (то есть внутри контейнера карточки): один для стикера и один для проявляющегося фона, который будет затемнять карточку. Обоим дивам укажи transition.
P.S. Не забудь контейнеру указать position: relative
2) Задай для дива, в котором будет лежать фон position: absolute, width: 100%, height: 100%. Так он растянется по размеру карточки. Потом дай ему background-colour с прозрачностью, чтобы было видно контент карточки, но он как бы казался накрыт фоном.
3) Задай диву с фоном изначальные параметры для его сокрытия: можешь скрыть с помощью opacity: 0 или height: 0. Это уже от твоих предпочтений, в зависимости от того, какую хочешь увидеть анимацию при появлении.
4) Задай диву со стикеров position: absolute, top: 0, left: тут уже унеобходимый отступ слева от контейнера карточки. Опять же скрой его изначально: opacity: 0, trnslateY(-сколько-то px) и тд. Опять жу по вкусу, смотря каким хочешь видеть его появление.
5) При ховере на карточку задавай диву со стикером и с фоном такие параметры, какие нужно.
Учитывай то, что анимироваться будут лишь те параметры, которым указано дефолтное значение. Например, если ты задал для стикера opacity: 0, а потом opacity: 1 — оно проанимируется. А вот если ты ему дал translateY, но изначально оно не было указано — то элемент просто перескочит бух всякой анимации.
Также учитывай, что значения надо задавать явно в конкретных единицах для анимации. Так height: 0 -> height: 100% — проанимируется. А вот height: 0 -> height: auto — нет.
И ещё, если ты скрывшь элемент через display: none, то все анимации у него пропадают.
Вроде все доступно описал, удачи
Простой
