Можно ли сделать плавный выход при hover, из display none в display block?

Question

[iminby]

Добрый день, подскажите, можно ли сделать плавное появление?
Через transition, по моему не получается.
У меня
Есть <li><a href=""></a><p></p></li>
Изначально <p>display:none;
при наведении соответственно, display: block

Можно ли как-то сгладить мягкость появления.
Вариант transition и opacity, но...у меня ещё позиционирование ,чтобы абазац появлялся над ссылкой..
То оно как-то долбится.

Answer 1

[alex]

p {
  visibility: hidden;
  opacity: 0;
  transition: visibility ease 0s, opacity ease 1s;
}

li:hover p {
  visibility: visible;
  opacity: 1;
}

Comments

[iminby]

то что нужно.

Answer 2

[Александр Белькевич]

Visibility используйте. Display только через JS (show, hide)

Comments

[iminby]

Да , точно.
Спасибо!

[alex]

Display только через JS

Вообще нельзя display плавно изменять, ни через css ни через js

[Александр Белькевич]

Alex: Почему? На jQuery нельзя разве использовать fadeIn или fadeOut?

[alex]

Александр Белькевич: Свойство display устанавливает тип бокса для элемента(flex, block, none, grid, table, inline....). как вы представляете себе плавные изменения между этими значениями? fadein, fadeout плавно изменяют opacity, а display просто ставят в конце или начале анимации.

[Евгений]

С помощью animation css