アイテムに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"; 
    } 
} 

2番目の欠点は、アニメーションを再起動する方法です。 再起動は、スタイルクラスを削除して再追加することによって機能しますが、これは正しい方法ですか？

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

Answer 1

この特定のケースでは、私は起こっていることが起こっていると思われるのは、classNameを変更すると、イントロアニメーションの副作用がキャンセルされることです。それを実行していたクラスを削除したので、キャンセルされたため、そのエラーがスローされます。

あなたは2つの方法でこれを修正することができるかもしれない：あなたが第二のアニメーションを追加したい場合は

label1Label.className = "intro triggered"; 

： あなたはにクラス名を設定しようと考えていますか？私はこれがうまくいくか100％確信していません。 2番目のアニメーションが開始されている間に最初のアニメーションを終了させる可能性があるので、試してみることです。

---

しかしどのような動作するはずですが、次のようになります。

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

それを行うことによって、あなたは、アニメーションをキャンセル/開始するときを完全に制御を持っている、および/またはアニメーションを実行しているスキップすることができ、この方法は自分であるにされますすでに進行中です。

---

2番目の質問は、はい、あなたはちょうどCSSアニメーションを使用している場合。再起動するには、そのCSSのプロパティをリセットする必要があります。