Я пытаюсь пошатнуть отображение элементов списка. У меня есть панель навигации с 3 категориями. Для каждой категории я перечисляю все элементы с задержкой, как показано ниже. Когда я переключаюсь с 1-й категории (с 5 элементами) на 2-ю категорию (с 3 элементами), запускается анимация. Однако, когда я переключаюсь с 1-й категории на 3-ю (а также с 5 элементами) и наоборот, анимация не запускается.
<div [@catList] = "items.length">
....
animations: [
trigger('catList', [
transition('* => *', [
query(':enter', style({ opacity: 0 }), {optional: true}),
query(':enter', stagger('200ms', [
animate('1s ease-in', keyframes([
style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
style({opacity: .5, transform: 'translateY(35px)', offset: 0.3}),
style({opacity: 1, transform: 'translateY(0)', offset: 1.0}),
]))]), {optional: true}),
])
]),
]
Это связано с тем, что вы привязываете свой триггер анимации @catList
к items.length
, когда новая длина и текущая длина отличаются, как в вашем первом случае, от 3
до 5
, angular видит, что он изменился, поэтому запускается анимация. По сути, angular просто выполняет простую строгую проверку равенства с помощью ===
, чтобы узнать, нужно ли запускать анимацию. если ваш массив items
не является изменчивый (вы не изменяете его напрямую, вместо этого вы возвращаете новый массив для каждой модификации), тогда вы можете просто использовать items
непосредственно в своей привязке, как этот [@catList]='items'
, потому что каждый раз, когда вы возвращаете новый массив, ссылка изменения, поэтому обнаружение изменений angular сработает, и ваша анимация будет запущена
я добавил еще один триггер <div [@catList] = "items" [@listAdd] = "items.length"> для обработки ручного добавления элементов
Как я уже сказал в своем ответе, я предполагал, что вы не изменяли свой массив на месте, и рекомендуется избегать мутации структур данных, чтобы избежать трудностей для поиска ошибок.
хммм, но когда я нахожусь в одной категории, мне нужно добавить в список вручную. теперь я теряю анимацию для добавления каждого элемента вручную :(