为项目添加 css 个动画

Question

我正在尝试运行在特定触发器后对项目进行动画处理。我的想法是使用 css 定义的关键帧动画，然后将它们添加到项目中。但是我这样做的方式不起作用。

我的问题：

如果第一次点击按钮，在介绍动画完成之前，会发生以下异常：

JS: EXCEPTION: Error: Uncaught (in promise): Error: Animation cancelled.
JS: STACKTRACE:
JS: Error: Uncaught (in promise): Error: Animation cancelled.
JS:     at resolvePromise (/data/data/org.nativescript.Animations/files/app/tns_modules/zone.js/dist/zone-node.js:496:32)
JS:     at resolvePromise (/data/data/org.nativescript.Animations/files/app/tns_modules/zone.js/dist/zone-node.js:481:18)
JS:     at /data/data/org.nativescript.Animations/files/app/tns_modules/zone.js/dist/zone-node.js:529:18
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.Animations/files/app/tns_modules/zone.js/dist/zone-node.js:314:38)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (/data/data/org.nativescript.Animations/files/app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:36:41)
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.Animations/files/app/tns_modules/zone.js/dist/zone-node.js:313:43)
JS:     at Zone.runTask (/data/data/org.nativescript.Animations/files/app/tns_modules/zone.js/dist/zone-node.js:214:48)
JS:     at drainMicroTaskQueue (/data/data/org.nativescript.Animations/files/app/tns_modules/zone.js/dist/zone-node.js:432:36)
JS: Unhandled Promise rejection: Animation cancelled. ; Zone: angular ; Task: Promise.then ; Value: Error: Animation cancelled.
JS: Error: Uncaught (in promise): Error: Animation cancelled.

我的css:

@keyframes entryFrames {
    from { background-color: blue; }
    to { background-color: yellow; }
}

.entry {
    animation-name: entryFrames;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes triggeredFrames {
    from { background-color: red; }
    to { background-color: green; }
}

.triggered {
    animation-name: triggeredFrames;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

我的代码：

import {Component, ViewChild, ElementRef} from "@angular/core";
import {Label} from "ui/label";

@Component({
    selector: "my-app",
    template: `
<StackLayout>
    <Button text="Press" (tap)="test()"></Button>
    <Label #label1 [text]="'Some'" class="view" textWrap="true"></Label>
</StackLayout>
`,
})
export class AppComponent {
    @ViewChild('label1') label1: ElementRef;

    public test() {
        let label1Label = <Label>this.label1.nativeElement;
        label1Label.text="Other";
        //label1Label.className="";
        label1Label.className="view";
    }
}

我第二个缺少的理解是如何重新启动动画。通过删除样式类并重新添加它来重新启动，但这是正确的方法吗？

// label1Label.className="";
label1Label.className="triggered";

Answer 1

在这个具体案例中；我怀疑发生的事情是，当您更改 className 时，您导致介绍动画的副作用被取消；因为你刚刚删除了 class 是运行它 - 所以因为它被取消然后抛出那个错误。

您可以通过两种可能的方式解决此问题：您是否考虑过将 class 名称设置为：

label1Label.className = "intro triggered";

你想什么时候添加第二个动画？我不是 100% 确定这会起作用；但这是我会尝试的，因为它可能允许第一个动画在第二个动画开始时完成。

然而应该起作用的是：

// Track if an animation is running
var runningAnimation = null;

// Clear our running animation variable so we know no animations are running
function animationDone() {
  runnningAnimation = null;
}

// Call this where you when you want the intro animation done
// Maybe on the pageLoaded or NavigatedTo events
function startIntroAnimation(view) {
   // Set the start color
   label1Label.backgroundColor = new colorModule.Color("blue");
  // start are intro animation
  runningAnimation = view.animate({ backgroundColor: new colorModule.Color("yellow"), duration: 4000 }).then(animationDone).catch(animationDone); 
}

function OnButtonTapped() {
   if (runningAnimation) { 
     runningAnimation.cancel();
   }
   // Set the start color
   label1Label.backgroundColor = new colorModule.Color("red");
   // Animate it to the finish color
   runningAnimation = view.animate({ backgroundColor: new colorModule.Color("green"), duration: 4000 }).then(animationDone).cancel(animationDone);
}

通过这种方式，您可以完全控制何时播放 start/cancel 动画，and/or 您可以跳过运行自己的动画已经在进行中。

关于你的第二个问题；是的，如果你只是使用 css 动画；然后要重新触发它，您需要重置它的 css 属性。

为项目添加 css 个动画

Adding css animations to item

css

animation

nativescript