Я пытаюсь включить в список пошаговую анимацию. До сих пор мне удавалось иметь потрясающую анимацию при загрузке. Помимо загрузки, я бы хотел, чтобы запускался срабатывание анимации поочередно при добавлении новых элементов в массив.
Я последовал этому примеру: 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)' }))
])
])
Основное отличие в моем случае заключается в том, что я добавляю в массив сразу несколько объектов. Я не знаю, возможно ли, чтобы новые элементы появлялись на странице в шахматном порядке.
