Применение эффекта перехода (transition) после появления ранее скрытого элемента?

Question

[Сергей]

Как вам известно, когда элемент со свойством display: none становится видимым, на нём и его потомках не срабатывают эффекты перехода, задаваемые свойством transition (наверное, из-за того, что свойство display само по себе нельзя анимировать и оно применяется мгновенно). Существует, как минимум, 2 варианта решения данной проблемы: отложенное добавление класса с transition с помощью js либо же использование свойства animation вместо transition. Знаете ли вы другие способы?

P.S. Возможно, я не совсем точно описал ситуацию, поэтому вот репродукция. 1. Мне не надо анимировать появление самого элемента. 2. Не надо рассматривать варианты, когда элемент делается невидимым с помощью других свойств.

Answer 1

[sdgroup14]

зачем вам тогда display none? делайте скрытие элемента opacity 0; visibility hidden и потом применяйте к ним транзишн....

Comments

[Сергей Попов]

Дополню ответ.
свойство будет выглядеть примерно так:

.element{
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s, opacity .2s ease-in-out;
}
.element.open{
    opacity: 1;
    visibility: visible;
}