Не работает пошаговая анимация при переключении на список такой же длины

Я пытаюсь пошатнуть отображение элементов списка. У меня есть панель навигации с 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}),
    ])
  ]),
]
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
469
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это связано с тем, что вы привязываете свой триггер анимации @catList к items.length, когда новая длина и текущая длина отличаются, как в вашем первом случае, от 3 до 5, angular видит, что он изменился, поэтому запускается анимация. По сути, angular просто выполняет простую строгую проверку равенства с помощью ===, чтобы узнать, нужно ли запускать анимацию. если ваш массив items не является изменчивый (вы не изменяете его напрямую, вместо этого вы возвращаете новый массив для каждой модификации), тогда вы можете просто использовать items непосредственно в своей привязке, как этот [@catList]='items', потому что каждый раз, когда вы возвращаете новый массив, ссылка изменения, поэтому обнаружение изменений angular сработает, и ваша анимация будет запущена

хммм, но когда я нахожусь в одной категории, мне нужно добавить в список вручную. теперь я теряю анимацию для добавления каждого элемента вручную :(

iPhoneJavaDev 10.09.2018 05:38

я добавил еще один триггер <div [@catList] = "items" [@listAdd] = "items.length"> для обработки ручного добавления элементов

iPhoneJavaDev 10.09.2018 05:41

Как я уже сказал в своем ответе, я предполагал, что вы не изменяли свой массив на месте, и рекомендуется избегать мутации структур данных, чтобы избежать трудностей для поиска ошибок.

Meme Composer 10.09.2018 09:53

Другие вопросы по теме