Как решить такую не сложную задачу по jquery?

Question

[Ростислав]

Вроде бы элементарная задача, но не могу решить уже несколько часов.
Есть несколько блоков с данными.

<select>
<option value="1">
<option value="2">
<option value="3">
</select>

<div class="parent-block">
    <div class="children-block children-block-visible" data-block="1">
        <div class="children-block__item"></div>
        <div class="children-block__item"></div>
    </div>
    <div class="children-block" data-block="2">
        <div class="children-block__item"></div>
        <div class="children-block__item"></div>
    </div>
    <div class="children-block" data-block="3">
        <div class="children-block__item"></div>
        <div class="children-block__item"></div>
    </div>
</div>

При загрузке страницы отображается только первый блок, для остальных прописано:
max-height:0px;overflow:hidden;

При выборе другого пункта из селекта блок который сейчас отображается должен плавно скрываться, а другой (выбранный в селекте) должен открываться.
https://www.youtube.com/watch?v=0PuAT0BDhwU&featur...

Делаю с помощью @keyframes анимации.
CSS примерно такой:

.children-block{
    max-height:0px;
    overflow:hidden;
    animation-duration: 1s;
    animation-name: hide-car-price;
    animation-fill-mode: both;

}
.children-block-visible{
    animation-duration: 1s;
    animation-name: show-car-price;
    animation-fill-mode: forwards;
}

@-webkit-keyframes show-car-price {
    0% {
        max-height: 0px;
    }

    100% {
        max-height: 1000px;

    }
}@-webkit-keyframes hide-car-price {
    0% {
        max-height: 1000px;
    }
    100% {
        max-height: 0px;
    }
}

В скрипте по событию change для select добавляю к нужному блоку класс .children-block-visible
Проблема в том что с таким css блок .children-block, который изначально должен отображаться, анимируется при загрузке страницы.

Понимаю что дурацкий вопрос. Помогите советом как такое сделать.

Comments

[Михаил]

Оформите в https://jsfiddle.net/ и добавьте пример js-кода.

[Ростислав]

Михаил: https://jsfiddle.net/boarworm/k78kp28p/1/
https://jsfiddle.net/boarworm/k78kp28p/1/
1) При загрузке страницы блоки анимируются (должно быть без анимации).
2) При change блок скрывается без анимации.

Answer 1

[Андрей]

Так повесьте на него сначала другой класс делающий его видимым без анимации, потом при втором change его убираете и дальше как обычно

Comments

[Ростислав]

Вешаю класс .children-block-visible-onload. Но когда при change его убираю, то он убирается без анимации (потому что для .children-block анимация не прописана).
Если же анимация для .children-block прописана (как в коде выше), то тогда анимация запускается при загрузке страницы.

Answer 2

[Дима Паутов]

https://jsfiddle.net/0pmuzd6d/2/

Comments

[Ростислав]

Ваше решение супер. Только одна проблема, у меня блоки изначально в display:flex.
Получается что нужно вместо slideDown() и slideUp() добавлять/убирать класс (например .visible) с анимацией?

[Дима Паутов]

Ростислав: я изменил код на классы!

[Ростислав]

К сожалению проблемы остались.
https://jsfiddle.net/boarworm/k78kp28p/1/
1) При загрузке страницы блоки анимируются (должно быть без анимации).
2) При change блок скрывается без анимации.
Просто такое будет не очень смотреться если на странице есть контент до и после этих блоков. При change вся страница будет дергаться.

Answer 3

[Stopy]

Алгоритм:
- Вначале твой блок не имеет классов связанных с его видимостью
- При открытии добавляешь класс .children-block-visible
- При закрытии удаляешь класс .children-block-visible и добавляешь .children-block-invisible

.children-block-invisible{
    animation-duration: 1s;
    animation-name: hide-car-price;
    animation-fill-mode: forwards;
}

@-webkit-keyframes hide-car-price {
    0% {
        max-height: 1000px;
    }

    100% {
        max-height: 0px;

    }
}