更新到v3后，Nativescript css动画停止工作

Question

将应用程序升级到{N} v3后导航到带有css动画的页面时出现以下错误

我正在使用以下代码：

HTML：

  <DockLayout flexDirection="row" class="actionText" backgroundColor="#E1E1E1" stretchLastChild="true" minHeight="65">
                    <Label (tap)="navigate()" dock="left" [text]="'ion-location'| fonticon"  class="ion x-large c-white faa-bounce" textAlignment="center" width="65" style="text-align: center; vertical-align: center;"></Label>
                    <Label [text]="address"  textWrap="true" ></Label>
                </DockLayout>

的CSS：

@keyframes bounce {
    0%,10%,20%,50%,80%{transform:translateY(0)}
    40%{transform:translateY(-15px)}
    60%{transform:translateY(-15px)}
}


.faa-bounce {
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: 3;
    animation-timing-function: ease;
}

Answer 1

根据破坏性变化文件：

  

更改方法keyframeAnimationFromInfo（info：KeyframeAnimationInfo，valueSourceModifier：number）：KeyframeAnimation.keyframeAnimationFromInfo的KeyframeAnimation（info：KeyframeAnimationInfo）：KeyframeAnimation。不再需要ValueSource。

https://github.com/NativeScript/NativeScript/blob/master/Modules30Changes.md

Answer 2

此css动画出现问题

@keyframes pulse {
    0% {transform: scale(1.1)}
    50% {transform: scale(0.8)}
    100% {transform: scale(1)}
}


.faa-pulse {
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: 3;
    animation-timing-function: ease;
}

我修改如下：

@keyframes pulse {
    0% {transform: scale(1.1, 1.1)}
    50% {transform: scale(0.8, 0.8)}
    100% {transform: scale(1, 1)}
}