Как сделать появление блока сверху при наведении (CSS)?

Question

[krashman]

Добрый день!

Погуглив различные формулировки не нашёл ответа на вопрос. Наверняка решается элементарно, но моих знаний не хватает. Подскажите, пожалуйста!

На сайте реализовано появление блока (меню) при наведении на ссылку в шапке.
В CSS установлено свойство transition: 1s; — благодаря чему блок появляется постепенно длительностью в 1с, но слева-направо. Как установить направление появления сверху вниз?

У transition не нашёл определений для направления. Только стили появления, скорость и задержка...

Comments

[Eugene Chefranov]

https://developer.mozilla.org/en-US/docs/Web/CSS/t...

[krashman]

Eugene Chefranov, так это же плавность появления, а не направление.

[Rustam Bainazarov]

krashman, направление можно задать с помощью изменения значений transform, margin или top/left/right/bottom.

Лучше с помощью transform, если позволяет случай (обычно спокойно позволяет).

Answer 1

[Алексей Чипига]

Задайте изначальную позицию по типу

.animated {
  transform: translateY(-100%);
  transition: transform 1s linear;
}

.animated:hover {
  transform: translateY(0);
}

Надеюсь идея понятна, transition не предназначен для указания направления. Он только о "переходе", что следует из его названия.

Comments

[krashman]

Спасибо!
Попробовал. Почти то, что надо, но немного не то.

translate меняет положение блока на странице по оси: то есть блок двигается по оси уже будучи полностью видным на экране.

А необходимо, чтобы блок как бы проявлялся сверху вниз, оставаясь в одной точке. Что можно попробовать для этого?

[Алексей Чипига]

Тут уже нужно применять магию с блоком, которы двигается поверх того, что появляется с линейным градиентом который идёт сверху вниз по типу linear-gradient(to top, #fff, transparent) и синхронизировать анимации. Если вы новичёк, не думаю что у вас это сразу получится.

Хотя может вам и это подойдет?
https://www.tutorialspoint.com/css/css_animation_f...

[strelok011]

Если необходимо, чтобы блок показывался как раздвигающаяся шторка - обертку нужно делать overflow: hidden и анимировать трансформом высоту. Проблема обычно вылезает в анимации к неизвестному значению высоты блока. Если величина известна, либо ее можно посчитать через js в тени, то будет отлично. Иначе - придется задавать заведомо большую высоту с запасом и получать на маленьких блоках резкие рывки, либо оборванную на больших.

[Тимофей]

Может что-то вроде такого?
https://ruseller.com/lessons.php?id=813&rub
Тут только при нажатии, но может направление укажет

[krashman]

strelok011,
спасибо, вот по этой цитате удалось найти нужное решение))

анимировать трансформом высоту

статья, которая помогла: https://ymatuhin.ru/front-end/height_transition_css/