Question

我正在尝试在NativeScript的Angular风格的图像列表之间进行动画处理。 Here is a demo的动画（支持博客文章here）。

尝试将此演示移植到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 does not support <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>的{{1}}元素不是孩子吗？

您可以找到我的完整NS Playground项目，该项目出现错误here。

角动画查询返回0个元素

0 个答案: