Плавное появление display flex или block, есть варианты решения?

Question

[Антон Вебсайтовский]

Всем привет, знаю что можно сделать на js, но все же хочется без js сделать.
Я пытался реализовать по примеру из инета, пока не вышло.

Есть блок, в нем две части, верхняя и нижняя, я нижнею часть скрываю, а когда наводим на блок, то показываю, пытаюсь сделать чтобы нижняя часть при появлении, плавно появлялась.

Я для появления блока, применяю flex, так как внутри блока идут блоки, к которым применяю flex, если применить к блоку block дисплай, то все ломается.

Рабочая схема тут:
https://codepen.io/AXOT/pen/ExpjqJx
jsfiddle.net/vlit/m72w5uob/289

Comments

[godsplan]

таких вопросов миллиард

[Антон Литвиненко]

дисплей блок не анимируется. играйся с опасити, визибилити, з-индекс

[godsplan]

и лучше на кодпен вкладывать. в россии jsfiddle не работает.а включать впн ради этого большинство вряд ли захочет

[Антон Вебсайтовский]

godsplane, я знаю.

[Антон Вебсайтовский]

godsplane, да, я пробовал, чет не вышло, по этому задал вопрос тут.

[Антон Вебсайтовский]

Антон Литвиненко, визибилити знаешь как работает? что если у блока есть стили, он скрывает но отступы показывает.

[Сергей delphinpro]

Антон Вебсайтовский, Есть так называемые дискретные свойства. Это те, у которых количество значений ограничено. В их числе свойство display. Такие свойства конечно же тоже анимируются, но плавности не будет. Какое промежуточное значение может быть между none и block? Никакое, его нет. Поэтому и анимация дискретная, мгновенное переключение между состояниями.

Ну а если нельзя плавно анимировать свойство display, то придется использовать другие, и как-то выходить из ситуации. Можно js на помощь позвать. Можно попробовать на кейфреймах сделать. На кейфремах основное время анимации займет например изменение opacity, а в последний момент, когда opacity уже =0 – переключить display.

[Антон Вебсайтовский]

Сергей delphinpro, а как бы сделал мой вариант? без js, к примеру с opacity и т.д.

[Сергей delphinpro]

Антон Вебсайтовский, я не видел вашего варианта. Вам же сказали - jsfiddle не открывается.

[Антон Вебсайтовский]

Сергей delphinpro, Работает vpn надо включить и все.

[Сергей delphinpro]

Антон Вебсайтовский, кому надо?

[Антон Вебсайтовский]

Сергей delphinpro, могу научить, пару кликов )

[Антон Вебсайтовский]

Сергей delphinpro, https://codepen.io/AXOT/pen/ExpjqJx

[Сергей delphinpro]

Антон Вебсайтовский,

.unn:hover div:last-child {
  animation: show 1s linear 1 forwards;
  display: flex;
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

[Антон Вебсайтовский]

Сергей delphinpro, ага, срабатывает. но это плохой пример, он плавный только при появлении, а при исчезании не срабатывает.

Я попробовал сделать что-то подобное, для исчезания.
Не сработало )

.unn>div:last-child{
display:none;
 animation: hide 1s linear 1 forwards;
}

  @keyframes hide {
  100% {
    opacity: 1;
  }
   0% {
    opacity: 0;
  }

[Сергей delphinpro]

Антон Вебсайтовский, ну вы так и хотели

пытаюсь сделать чтобы нижняя часть при появлении, плавно появлялась.

[Антон Вебсайтовский]

Сергей delphinpro, это как поставь дверь без ручки )) вроде есть, но открыть нельзя )

[Сергей delphinpro]

Антон Вебсайтовский, Проф-деформация. Если заказчик хочет дверь без ручки, я ставлю ему дверь без ручки. А если начинает выпендриваться - указываю на соответствующий пункт в договоре. =)
Нужно четко излагать свои хотелки.

[Антон Вебсайтовский]

Сергей delphinpro, я уже понял как клиентам делаешь задачи ! мол ты не сказал про это, значит плати больше, есть такие вещи, которые не обязательно прям расписывать, там и так понятно что с чем идет, как про дверь с ручкой.

Ну какой смысл делать анимацию только для появления ) ну бред же, логично что анимация должна работать в обе стороны.

[Сергей delphinpro]

Антон Вебсайтовский, ну да.
Сидишь, пилишь все как сам видишь. Потом выставляешь счет клиенту, а у того глаза на лоб:
– а что так дорого?
– ну как что? вот анимашку открытия сделали, и само собой анимашку закрытия.
– а нам не надо было анимашку закрытия..

таких диалогов было море. так что всё исключительно в рамках ТЗ.

[Антон Вебсайтовский]

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

[Сергей delphinpro]

Антон Вебсайтовский, Это альтруизм, а не профессионализм.
Клиент осознанно заключает договор. К договору прилагается техническое задание. Приемка будет выполняться по тз. Зачем я буду делать неоплачиваемую работу?

Мы слегка отошли от темы.

Если вы хотите сделать анимацию появления/скрытия блока профессионально, то напишите пару строк js и будет всё красиво. Иногда можно обойтись трансформациями и прозрачностью, но это частные случаи.

Answer 1

[historydev]

Используй transition на opacity

Comments

[Антон Вебсайтовский]

там без дисплей флекс нельзя.
там же стили у блока, а opacity, он отступы не прячет.

[historydev]

Антон Вебсайтовский, так установи flex, в чём проблема?

click

.box {
  width: 400px;
  min-height: 200px;
}

.content {
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 2s;
}

.box:hover .content {
  transition-delay: 1s;
  opacity: 1;
}

[Антон Вебсайтовский]

Вот про что я тебе говорил.
Блок скрыт, но то пространство которое он занимает, оно не скрыто.
По этому opacity, это плохой вариант.

[historydev]

Антон Вебсайтовский, Просто включай голову, не бойся сделать ошибку:

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

Владимир, Не это не то, там есть отступы, но их можно спрятать и применять. jsfiddle.net/vlit/m72w5uob/320

Косяк в том что, он сначала пространство расширяет где будет блок, и делает он это не анимированно, а потом появляется блок медленно. В моем этом примере наведи и поймешь.

[historydev]

Антон Вебсайтовский, вот так можно:

[Антон Вебсайтовский]

Владимир, кстати да, как вариант, работает, боли менее. спасибо

[historydev]

Антон Вебсайтовский, кнопочку нажми)

[Антон Вебсайтовский]

Владимир, вот реализовал более приближено, что не нравиться, так это что плющит как-то, https://jsfiddle.net/vlit/cy0tgas7/33/

Круг допустим сжимает.

[Антон Вебсайтовский]

Ощущение что анимация просто на height, срабатывает и все, а opacity, не срабатывает анимация.

[Максим]

Антон Вебсайтовский, тут надо делать так что бы появляющая часть перекрывала в низ - примерно как делают в магазинах появление контента при наведении на карточку, типа вот этого: https://codepen.io/topicstarter/pen/yLqYVEL