Question

我正在创建一个带有无限循环的框的css动画，当另一个元素完成其css过渡时，该循环停止。

使用javascript，我正在使用webkitTransitionEnd检测css转换的完成事件，然后使用jQuery我删除动画框的css并将其替换为迭代次数为2的新类。这部分按预期工作。

出乎意料的是，在桌面游戏和移动浏览器中，盒子仍然在旋转，因为它仍处于无限循环中。而在桌面上chrome和firefox按预期工作。

这是我正在使用的CSS

<ListView ItemsSOurce="{Binding Players}" RowHeight="75">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Gray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="15"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <ContentView Grid.RowSpan="2" BackgroundColor="Blue">
                <Label Text="{Binding PlayerId}" Rotation="90" TextColor="White"/>
            </ContentView>
                <Label Grid.Column="1" Text="{Binding Date}" TextColor="White" BackgroundColor="Red" HorizontalOptions="End"/>

                ...

            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这里是jsfiddle https://jsfiddle.net/65gbbovy/1/

我怎样才能让它在桌面游戏中运行？

感谢

桌面游猎的css动画迭代

0 个答案: