Как анимировать блоки?

Можешь помочь с кодом? При добавлении блока анимация есть, а при удалении блока анимации нету.
https://codepen.io/roderen/pen/ZELBPpB

Привет, смотри
Блоки находятся друг под дружной
а смена происходит через этот код

if (currentTab <= 2) { // Смена табов
    x[currentTab].classList.add('tab__unactive');
    x[currentTab].style.display = "none";
    currentTab = ++currentTab;
    x[currentTab].classList.add('tab__active');
    x[currentTab].style.display = "block";
  }

вот этот момент
x[currentTab].style.display = "none";
он сразу убирает элемент (скрывает), но display не анимируется.
Если есть желание чтобы форма по высоте изменялась плавно, то нужно чтобы анимировался контейнер по высоте. А для этого нужно следить за высотой внутрянки контейнера и выставлять значение height соответственно. Ну и на контейнер я думаю достаточно будет поставить transition обычный, без keyframe
тогда tabIn можно будет убрать в коде, скрытие можно не анимировать и делать сразу x[currentTab].style.display = "none";

Есть вариант другой, но он более сложный получится. Для этого необходимо чтобы блоки с инпутами были абсолютом друг под дружкой, но следить за высотой всё равно придется, иначе верстка поедет

WebEagle, В том то и дело, что я могу поставить задержку в одну секунду и вроде как не особо видно, что блок скрывается сразу (без анимации), но хотелось попробовать с анимкой

WebEagle, Я питался даже найти на кодпене (на гитхабе буду скоро искать) подобные квизы, но с анимацией. Я нахожу либо анимацию идеальную, но она на jqeury, что я не люблю. Либо ввобще без анимок

Максим Иванов, вот этот код окутать в контейнер

<div class="tab">Name:
    <p><input placeholder="First name..." name="fname"></p>
    <p><input placeholder="Last name..." name="lname"></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." name="email"></p>
    <p><input placeholder="Phone..." name="phone"></p>
  </div>
  <div class="tab">Birthday:
    <p><input placeholder="dd" name="dd"></p>
    <p><input placeholder="mm" name="nn"></p>
    <p><input placeholder="yyyy" name="yyyy"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." name="uname"></p>
    <p><input placeholder="Password..." name="pword" type="password"></p>
  </div>

получится:

<div id="form-container">
<div class="tab">Name:
    <p><input placeholder="First name..." name="fname"></p>
    <p><input placeholder="Last name..." name="lname"></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." name="email"></p>
    <p><input placeholder="Phone..." name="phone"></p>
  </div>
  <div class="tab">Birthday:
    <p><input placeholder="dd" name="dd"></p>
    <p><input placeholder="mm" name="nn"></p>
    <p><input placeholder="yyyy" name="yyyy"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." name="uname"></p>
    <p><input placeholder="Password..." name="pword" type="password"></p>
  </div>
</div>

у form-container нужно будет играться с высотой, на него вешай анимацию css transition только на высоту, и обязательно добавить overflow: hidden и position: relative (иначе будет появляться скролл когда от маленькой формы к большой переходишь)
и выставляй ему высоту равной высоте текущего активного tab'а (offsetHeight)

Максим Иванов, проще анимировать можно)) но если анимацию другого плана использовать

WebEagle, можно подробнее?)

Максим Иванов, вариаций с формами разных много, можно сделать например блок с overflow, и при переключении формы, старая уезжает влево, новая появляется справа. так же сочетание JS+CSS, основа на overflow, absolut, transition ставится на left. Тут только практика и насмотренность поможет)))