Как правильнее всего реализовать данную идею?

Question

[gazes12]

https://codepen.io/gazes12/pen/WNzMzLJ

На данный момент при клике по сайту, будет появляться и исчезать блок. Проблема в том, что при исчезании не пропадают отступы от него, если задавать display: none, то будет исчезать плавность появления. Как правильнее всего реализовать данную задачу?

Comments

[Ankhena]

почему не работает?

gazes12, расскажите, пожалуйста, какое значение будет у display на 50%? flex-none? none-flex? nfolneex?
А на 30%?

Вот и браузер не знает.
Поэтому и не работает.

Вам предлагают быстро поменять display, а дальше менять все остальное, что нужно для анимации.

Я бы попробовала обойтись без смены display.
Отступы можно тоже убирать. Правда, будет сдвигаться нижний блок (но по демке не понятно, какой эффект должен быть на самом деле).
Можно задать отступы второму элементу.
Можно убирать у одного и задавать другому с одинаковой скоростью (я бы не стала, риск дерганья)

Answer 1

[Froggyweb]

использовать keyframes где в 0 % будет dispalay block

Comments

[gazes12]

Froggyweb, почему не работает?

.recalls__result {
    display: none;

    &.visible{  
        animation: k-visible 5s infinite;

        @keyframes k-visible{
            0%{
                display: flex;
            }
    
            100%{
                display: none;
            }
        }
    }
}

[Froggyweb]

gazes12, свойство display не анимируется. анимируй opacity к примеру.