nativescript Implementing Animations in Nativescript Background Animation of StackLayout
Example
Animating Background color of stacklayout on tapping button
pages/main.component.ts
import {Component, ElementRef, ViewChild} from "@angular/core";
import {Color} from "color";
import {View} from "ui/core/view";
@Component({
selector: "main",
template: `
<StackLayout #el>
<Button text="Apply Changes" (tap)="changeBgColor()"></Button>
</StackLayout>
`,
styleUrls: ["pages/main/main-common.css"],
})
export class MainComponent {
@ViewChild("el") el: ElementRef;
changeBgColor() {
let el = <View>this.el.nativeElement;
el.animate({
backgroundColor: new Color("#222"),
duration: 300
});
}
}
pages/main-common.css
StackLayout{
background-color: #333;
}
