Как сделать анимацию display block/none без jquery?

Question

[knowledge]

Блок имеет display: none, при наведении мыши свойство меняется на display: block
Через query slideToggle происходит анимация, блок как бы выезжает вниз

Можно ли это сделать на чистом js или css?
Знаю, что свойство display не анимируется. Можно было бы через height, но свойство меняется с 0 на auto, что тоже не анимируется....
Видел различные реалзации через opacity, visible, но там все очень некрасиво, через появление и т.д. Простой красивый вариант выезда блока, как это делает jquery slideToggle я не видел ни разу

Пробовал через anime.js но там тоже не анимируется свойство display
Может быть есть какие-то библиотеки анимации, которые умеют это делать

Answer 1

[WapSter]

https://getbutterfly.com/how-to-implement-jquery-s...
Погуглил за тебя

Comments

[knowledge]

Да, это отличный вариант, на основе этого примера написал свой слайдер)

Answer 2

[Kostya10295]

Можно анимировать через max-height и overflow :hidden; в ховере задаёте max height явно превышающий нужный

Comments

[knowledge]

плавность анимации страдает из-за этого