Как задать анимацию transition для появления контента?

Question

[devfior]

Есть пример с выпадающим списком контента: https://codesandbox.io/s/expand-content-4pc09c?fil...
Но появление контента на кнопку происходит довольно быстрое. Нужно задать плавность с помощью transition свойства, но не получилось.
Насколько я понимаю, нужно добавить какой-то эффект появления с помощью visability, но тут идет завязка на useState также пробовал задать для контента свойство: transition: all 0.5s ease-out; но анимация не происходит

Comments

[Антон Антон]

Нужно добавлять его на страницу с opacity = 0 и потом сразу ставить opacity = 1 (уже после обновления DOM), тогда css переход отработает. Наверное в реакте есть какие-нибудь костыли для этого. Ну или можно попробовать vue со встроенным компонентом transition )

[Вадим]

Переделайте условную отрисовку на условное добавление класса, а потом гуглите: как анимировать display: none.
Например вот https://harrix.dev/blog/2018/animation-from-displa...

[cssfish]

Вадим, это какой-то оверхед. надо просто display: none выкинуть и скрывать любым другим способом (z-index, нулевые размеры, вынос вбок...), плюс анимировать opacity через transition, и все

[Вадим]

cssfish, Не знаю зачем Вы мне это написали.
Автору пищите, он вопрос задаёт.

Мой комментарий лишь продолжает выбранную автором логику.

Answer 1

[Aleksandr]

свойства css, в код js.