如何在 Nativescript 中为列表项内的元素设置动画？

Question

我正在尝试在点击另一个项目时为列表项目中的元素设置动画，但我找不到获取它的方法。

<Repeater items="{{ feedItems }}">
    <Repeater.itemTemplate>
        <GridLayout>

            <GridLayout rows="1*,1*, 1*">

                <GridLayout columns="4*,22*">
                    ...
                </GridLayout>

                <GridLayout row="2">
                    ...
                    <Image col="2" verticalAlignment="bottom" tap="showElementAndAnimate" />
                </GridLayout>
            </GridLayout>

            <GridLayout cssClass="ElementToShow" columns="1*,1*">
                <GridLayout rows="1*,1*,1*" col="1" cssClass="ElementToAnimate">
                    ...
                </GridLayout>
            </GridLayout>
        </GridLayout>
    </Repeater.itemTemplate>
</Repeater>

问题是让元素在点击后设置动画，因为有一个转发器

Answer 1

您可以做的是：

1. 向您的第一个父级 GridLayout 添加属性（或 ID）。
2. 将 id 添加到您想要设置动画的 GridLayout（在您的例子中 - 带有 cssClass="ElementToAnimate" 的 GridLayout）。
3. 从函数 showElementAndAnimate.
中的 args 访问您想要点击的图像
4. 然后获取图像父级，直到您到达具有已指定属性的父级（从点 1）。
5. 当达到正确的 GridLayout 时，使用函数 getViewById 获取您想要设置动画的 GridLayout（具有第 2 点中的 id 的那个）。
6. 获取元素后，可以对其进行动画处理。