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

Question

[Максим Иванов]

spoiler

Как сделать так, чтобы срабатвала анимация (transition и opacity), а уже потом display block/none?

Answer 1

[WebEagle]

используйте @keyframes
https://webref.ru/css/keyframes

Comments

[Максим Иванов]

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

[WebEagle]

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

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, В том то и дело, что я могу поставить задержку в одну секунду и вроде как не особо видно, что блок скрывается сразу (без анимации), но хотелось попробовать с анимкой

[Максим Иванов]

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

[WebEagle]

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

<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]

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

[Максим Иванов]

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

[WebEagle]

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

Answer 2

[Anton]

А чем просто изменение opacity не устраивает? Для какой цели использовать display block/none?

Так же возможно что transition для нужного элемента не срабатывает
https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Приведите финальный пример того что должно получиться, по вашему коду ничего не понятно

Comments

[Максим Иванов]

А чем просто изменение opacity не устраивает? Для какой цели использовать display block/none?

Ну сами подумайте, что будет если использовать чисто opacity без display block/none...

Приведите финальный пример того что должно получиться, по вашему коду ничего не понятно

А что тут непонятного то? Сейчас блоки появляются/убираются без транзишина, а нужно с ним.

Человек выше привёл рабочий пример с @keyframes

[Anton]

Максим Иванов,

Ну мне было не понятно что вам нужно в итоге, после того как описали в своем комментарии стало понятно. Вам понятно? )

Рад что вам пригодился пример с keyframes, удачи в использовании.

"Как сделать так, чтобы срабатывала анимация (transition и opacity), а уже потом display block/none?"

отследить событие и после применять display block/none через javascript
https://developer.mozilla.org/en-US/docs/Web/API/H...

Надеюсь у вас все получиться.

*Вообще я бы просто подглядел у кого то как это реализовано, есть подозрение что это делается как в простом слайдере с использованием горизонтальных сдвигов и overflow.