Блог

Главная - Вопросы по программированию - Угловая анимация: сначала затухание, затем затухание

Угловая анимация: сначала затухание, затем затухание

#angular #typescript #angular-animations

#угловая #typescript #angular-анимация

Вопрос:

У меня есть следующий HTML

 <div @fadeInOut *ngIf="state">State is true</div>
<div @fadeInOut *ngIf="!state">State is false</div>

<button (click)="state = !state">Toggle</button>

И я хочу анимировать переход:leave и :enter. Я бы сказал, очень тривиально

Я могу сделать это со следующей анимацией

  trigger("fadeInOut", [
      transition(":enter", [
         style({ opacity: 0 }),
         animate(1000, style({ opacity: 1 }))
      ]),
      transition(":leave", [animate(1000, style({ opacity: 0 }))])
 ])

Но проблема в том, что как только начинается переход, оба элемента становятся видимыми. Чего я хочу, так это чтобы сначала исчезло :leave, а затем появилось :enter. Каков правильный способ добиться этого?

Ответ №1:

Вы можете добиться этого, добавив задержку для :enter анимации, равную длине :leave анимации

 trigger("fadeInOut", [
  transition(":enter", [
    style({ opacity: 0 }),
    animate("1000ms 1000ms", style({ opacity: 1 }))
  ]),
  transition(":leave", [animate(1000, style({ opacity: 0 }))])
])

Ссылка: https://angular.io/api/animations/animate

Комментарии:

1. Это то, что я пробовал, кажется, что задержка не влияет на вставку вводимого элемента, а только при запуске анимации: stackblitz

2. Анимация работает так, как вы хотели. Ваша проблема состоит в том, чтобы показывать только один элемент одновременно. Это может быть достигнуто путем помещения divs в контейнер и скрытия переполнения.

3. Да, я понимаю, что вы имеете в виду. Если я присвою кнопке абсолютную позицию (она не будет прыгать вверх-вниз), но это не исправит ее полностью. Я бы ожидал, что можно было бы отложить вставку этого элемента:entering

4. Вы имели в виду что-то подобное: stackblitz ? Мне это не нравится, я надеялся, что angular сможет сделать это за меня

5. Проблема заключается в порядке расположения элементов. Я разобрался с этим, сделав позицию абсолютной, а фон прозрачным. Проверить stackblitz.com/edit/angular-ivy-p5dj2y . Лучше всего это будет работать в маршрутизаторе-розетке, так как выходящий элемент всегда будет первым, а входящий элемент всегда будет следующим.