пытается обернуть голову вокруг анимации списка элементов, где пользователи могут перемещать элементы вверх и вниз, по одному, по одному за раз.
Я был очень взволнован, когда документация заговорила о :increment и :decrement значениях селектора.Однако я не могу заставить это работать.
StackBlitz запущен: https://stackblitz.com/edit/angular-j6ejbe
Суть моего кода:
animations: [
trigger('move', [
transition(':decrement', [style({ opacity: 0 }), animate('5s ease', style({ opacity: 1 }))]),
transition(':increment', [style({ transform: 'scale(0.5)' }), animate('5s ease', style({ transform: 'scale(1)' }))]),
])
],
myhtml:
<div [@move]="index" *ngFor="let item of items; let index = index;">
<span (click)="moveUp(item)">^</span> <span (click)="moveDown(item)">v</span> {{index}} : {{item}}
</div>
Результат довольно странный:
Во-первых, похоже, что только переход :incrementпинать в (шкала), а не :decrement (непрозрачность).Во-вторых, кажется, что переход срабатывает только один раз на индекс.
Это ошибка в библиотеке переходов / анимаций?
Или я просто использую / понимаюне так?
Обновление
Часть проблемы, похоже, связана с *ngFor.Если я добавлю дочерний элемент div и анимирую его, все будет лучше, но не на 100%.
Две проблемы все еще происходят:
- Во-первых, кажется, что
:increment работает как положено, но :decrement требует пару раундов для работы. - Во-вторых, мне кажется, что я должен использовать внутренний элемент
div.Я не могу поставить анимацию на ng-container.Это немного раздражает, так как я не люблю добавлять дополнительные div элементы только к hack что-то.
