Запрос угловой анимации возвращает 0 элементов - PullRequest
Новая
       69

Запрос угловой анимации возвращает 0 элементов

0 голосов
/ 14 октября 2019

Я пытаюсь анимировать между списком изображений в стиле Angular NativeScript. Вот демонстрация анимации, которую я собираюсь выполнить (поддержка сообщения в блоге здесь ).

При попытке перенести эту демонстрацию на NativeScript я получаюследующие ошибки: 

@slideAnimation has failed due to:

- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)

- `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)

Из того, что я могу сказать, NativeScript не поддерживает <ng-template ngFor ..., поэтому мне пришлось переместить свою логику итерации в контейнер макета с помощью *ngFor: 

<GridLayout>
    <ScrollView class="page">
        <StackLayout class="home-panel">
            <Label text="cur idx {{currentIndex}}"></Label>
            <FlexboxLayout [@slideAnimation]="currentIndex" backgroundColor="lightgray" justifyContent="center"
                *ngFor="let slide of kitImages; let i = index">
                <Image class="slide slide-animation nonDraggableImage" *ngIf="isCurrentSlideIndex(i)"
                    (swipe)="onSwipe($event)" [src]="slide.src" stretch="none"></Image>
            </FlexboxLayout>
        </StackLayout>
    </ScrollView>
</GridLayout>

Мое определение animations выглядит следующим образом: 

animations: [
        trigger('slideAnimation', [
            transition(':increment', group([
                query(':enter', [
                    style({
                        transform: 'translateX(100%)'
                    }),
                    animate('0.5s ease-out', style('*'))
                ]),
                query(':leave', [
                    animate('0.5s ease-out', style({
                        transform: 'translateX(-100%)'
                    }))
                ])
            ])),
            transition(':decrement', group([
                query(':enter', [
                    style({
                        transform: 'translateX(-100%)'
                    }),
                    animate('0.5s ease-out', style('*'))
                ]),
                query(':leave', [
                    animate('0.5s ease-out', style({
                        transform: 'translateX(100%)'
                    }))
                ])
            ]))
        ])
    ],

Почему query(':enter' не соответствует ни одному из элементов? Разве <Image> элементы не являются потомками <FlexboxLayout>?

Вы можете найти мой полный проект NS Playground, который показывает ошибку здесь .

...