Как обрабатывать анимацию и переходы при использовании NGXS в Angular 8? - PullRequest
Новая
       59

Как обрабатывать анимацию и переходы при использовании NGXS в Angular 8?

2 голосов
/ 08 октября 2019

Я впервые использую NGXS store для управления состоянием приложения. Все идет довольно хорошо, но я столкнулся с проблемой, которую мне не удалось преодолеть, и это касается переходов / анимаций. У меня есть список предметов, и эти предметы могут быть в выбранном состоянии, что позволяет им расширяться и отображать дополнительную информацию. Перед тем, как подключить эту функцию к хранилищу (она работала непосредственно с компонентом), я использовал стандартные CSS-переходы на max-heigth для анимации расширения, но как только я подключил эту функцию к хранилищу (начал отправлять действия),переходы перестали работать. Я вижу, что каждый раз, когда магазин обновляется, элементы dom удаляются и читаются в dom, и это делает использование стандартного CSS неосуществимым. Поэтому я перешел и попытался использовать угловые анимации с триггером, которые используют разные состояния для выполнения переходов, но у меня получилось только расширение, а не сокращение, и если у меня есть выбранный элемент (расширенный), а затем добавить другой, выбранный элемент повторяетсяанимация и это не желательно. Вот соответствующий код: 

animations: [
    trigger('xis', [
      state(
        'expanded',
        style({
          maxHeight: '100px',
        }),
      ),
      state(
        'closed',
        style({
          backgroundColor: 'green',
          maxHeight: '0',
        }),
      ),
      transition('* => expanded', [animate('300ms')]), // This represent what I already tried
      transition('* => closed', [animate('300ms')]),   // And not that I use all of these
      transition('* => *', [animate('300ms')]),
      transition(':enter', [animate('300ms')]),
      transition(':leave', [animate('300ms')]),
    ]),
  ],
})

<div
    items
    class="item"
    [ngClass]="{ selected: isSelected(hp) | async }"
    *ngFor="let hp of reportItem$ | async"
    (click)="selectItem(hp.getId())"
  >
    <div class="item-header">...</div>
    <div
      class="complementary-info"
      [@xis]="(isSelected(hp) | async) ? 'expanded' : 'closed'"
    >
      ...
    </div>
</div>

Интересно, сталкивался ли кто-нибудь с этой проблемой и нашел ли способ ее решить или кто-то может указать мне на то, что я делаю неправильно

1 Ответ

1 голос
/ 08 октября 2019

Я решил проблему, избегая повторного рендеринга списка при обновлении состояния. Мы можем предоставить «функцию отслеживания», как задокументировано здесь для * ngFor, которая обеспечит повторную визуализацию списка только при наличии реальных изменений, что позволит использовать стандартные переходы и отбрасывать угловую анимацию.

...