Как работает передача двух функций style() при передаче в функцию query() для Angular Animations?

Будучи новичком в угловых анимациях, я несколько раз читал документацию по анимации angular.io, чтобы понять, как все это работает. Я думаю, что у меня есть приличное понимание, однако есть некоторые сценарии, которые документы не объясняют.

Учитывая этот стартовый проект, у меня возник вопрос относительно использования ими метода query() с несколькими функциями style().

В упомянутом выше проекте github в в этом файле используется анимация, объяснения которой я не нашел в Интернете.

`

query(
      ':leave > *',
      [
        style({ transform: 'translateY(0%)', opacity: 1 }),
        animate(
          '0.2s ease-in-out',
          style({ transform: 'translateY(-3%)', opacity: 0 })
        ),
        style({ position: 'fixed' })
      ],
      { optional: true }
    )

`

Насколько я понимаю, первая функция style(), переданная в функцию query(), устанавливает начальный стиль для любого уходящего элемента и любого из его дочерних элементов, обозначенных :leave > *. Затем функция animate() будет анимировать этот элемент с течением времени 0.2s ease-in-out с предоставленным style(). НО что должен делать последний style({ position: 'fixed' })???

Я могу удалить его, и я не нахожу видимых изменений. Я могу изменить переданный объект на style({ background: 'red' }) и не вижу никаких видимых изменений. Что оно делает?


angular angular-animations
person O.MeeKoh    schedule 12.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я наконец понял это.

Краткая версия:

Причина последнего style({ position: 'fixed' }) состоит в том, чтобы взять уходящий элемент (в данном случае компонент) и убедиться, что он не влияет на стиль других входящих элементов.

Длинная версия:

Новый элемент (или компонент), который входит в DOM, по-прежнему «разделяет» представление или «поток документов» с элементом (или компонентом), который покидает DOM. Это означает, что два элемента (или компонента) являются частью обычного потока документов, даже если старый элемент (или компонент) не виден. Это означает, что если у нас есть нижний колонтитул, который должен появиться под новым элементом (или компонентом), он не будет отображаться прямо под новым компонентом, а появится внизу документа, сразу после старого элемента, который еще не был удалены из ДОМ. После того, как старый элемент был удален, и мы НЕ использовали третье последнее свойство 'style({ position: 'fixed' })', у нас будет задержка в отображении нижнего колонтитула прямо под новым элементом.

Позиция «фиксированная» перемещает старый и на данный момент невидимый элемент из потока документа, оставляя место для нового элемента и нижнего колонтитула, которые должны отображаться должным образом.

Это можно легко проверить, изменив

`style({ transform: 'translateY(0%)', opacity: 1 }),
              animate(
                and increasing the time==>'1.2s ease-out',
                style({ transform: 'translateY(-3%)', opacity: 1 <== this })
              ),`

чтобы увидеть, что происходит на самом деле. Я надеюсь, что это поможет кому-то!

person O.MeeKoh    schedule 12.04.2019