WedX - журнал о программировании и компьютерных науках

Angular Stagger Animation для нескольких новых элементов

Я пытаюсь включить в список пошаговую анимацию. До сих пор мне удавалось иметь потрясающую анимацию при загрузке. Помимо загрузки, я бы хотел, чтобы запускался срабатывание анимации поочередно при добавлении новых элементов в массив.

Я последовал этому примеру: https://medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e

И придумал быстрый тест: https://stackblitz.com/edit/angular-stagger-animation-test2.

В app.component.ts я определяю пошаговую анимацию, а в child.component.ts я определяю анимацию элемента.

Пошаговая анимация:

trigger('list', [
    transition(':enter', [
        query('@animate',
            stagger(250, animateChild())
        )
    ])
])

query('@animate') получает элемент дочернего компонента, а animateChild() запускает анимацию в дочернем компоненте.

Дочерняя анимация:

trigger('animate', [
  transition(':enter', [
    style({ opacity: 0, transform: 'translateY(-10px)' }),
    animate('250ms', style({ opacity: 1, transform: 'translateY(0px)' }))
  ]),
  transition(':leave', [
    style({ opacity: 1 }),
    animate('250ms', style({ opacity: 0, transform: 'translateY(10px)' }))
  ])
])

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


Ответы:


1

Мне удалось решить эту проблему, изменив родительскую анимацию следующим образом:

trigger('list', [
  transition('* => *', [
    query(':enter',
      stagger(250, animateChild())
    )
  ])
])

Таким образом, переход будет срабатывать в любом состоянии, а не только тогда, когда список находится в состоянии «ввода». Кроме того, запрос теперь проверяет ':enter', что означает, что он получит все новые элементы, которые входят в список.

Чтобы вызвать анимацию, я сохраняю компоненты в списке, и так при каждом изменении в списке запускается анимация.

Родительский шаблон

<div [@list]="list.length">
  ....
</div>

Обновленный stackblitz

https://stackblitz.com/edit/angular-stagger-animation-test2

Ссылки:

26.09.2018
Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


Для любых предложений по сайту: [email protected]