Анимация не работает правильно, когда массив элементов переупорядочен / отсортирован с использованием ngForOf? - PullRequest
0 голосов
/ 26 января 2019
<div>
    <div>
        <ng-template ngFor let-item="$implicit" [ngForOf]="pictures">
            <div
                [@slideToggle]="item.state"
                (click)="activate(item, $event)"
                [ngClass]="{'active' : item.active}">
                <img [src]="item.src" [alt]="item.alt" [title]="item.title"/>
                <div>
                    <span>{{item.title}}</span>
                </div>
            </div>
            <div [class.active]="item.active" [@viewportToggle]="item.state"
                 [attr.state]="item.state"
                 [ngClass]="{'out' : item.state === 'out', 'stay' : item.state === 'stay', 'in': item.state === 'in'}">
            </div>
        </ng-template>
    </div>
</div>

Trigger:

trigger('viewportToggle', [
  state('out', style({
    height: 0,
  })),
  state('in', style({
    height: '*',
  })),
  state('stay', style({
    height: '*',
  })),
  transition('out => in', [
    style({
      display: 'block'
    }),
    animate('250ms ease-out')
  ]),
  transition('in => stay', [
    animate('0ms ease-out')
  ]),
  transition('* => out',
    animate('250ms ease-in')
  )
])

Я рендерил текущее состояние элемента через список классов (для проверки), и все время устанавливается правильное состояние, но когда pictures переупорядочивается, viewportToggle не срабатывает правильно.

Например, после сортировки, когда вы нажимаете на элемент, даже когда state равен 'in', срабатывает state равный 'out', который был состоянием элемента, когда он неактивен / не выбран, поэтому высота равна 0px, хотя state равна in.

Похоже, что это также временная проблема с *ngFor. После переупорядочивания списка иногда анимация не запускается сразу, или, по-видимому, существует период ожидания, прежде чем анимация заработает.

Примечание. На самом деле это компонент галереи от SmartAdmin, но мне пришлось пересоздать его, чтобы добавить несколько вещей. Даже при использовании оригинального компонента я все равно сталкиваюсь с той же проблемой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...