<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, но мне пришлось пересоздать его, чтобы добавить несколько вещей. Даже при использовании оригинального компонента я все равно сталкиваюсь с той же проблемой.