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时，你会导致前奏动画的副作用被取消;因为你刚刚删除了正在运行它的类 - 所以因为它被取消了然后抛出了那个错误。

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

label1Label.className = "intro triggered";

如果要添加第二个动画？我不是百分百肯定这会起作用;但这是我会尝试的，因为它可能允许第一个动画完成，而第二个动画开始。

然而，应该做的是：

// 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);
}

通过这种方式，您可以完全控制何时开始/取消动画，和/或您可以跳过运行动画已经在进行中。

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

将css动画添加到项目

1 个答案: