Adding css animations to item
<p>I'm trying to run an animation on an item after a specific trigger.
My idea was to use css-defined keyframe-animations and then add them to the item.
But the way I'm doing it isn't working.</p>

<p>My problem:</p>

<p>If the first click on the button happens, before the intro-animation is done, the following exception occurs:</p>

<pre><code>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.
</code></pre>

<p>My css:</p>

<pre><code>@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;
}
</code></pre>

<p>My code:</p>

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

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

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

<p>The second missing understanding for me is how to restart an animation.
Restarting works by removing the styleclass and re-adding it, but is this the correct way?</p>

<pre><code>// label1Label.className="";
label1Label.className="triggered";
</code></pre>