StackLayout 的背景動畫

在點選按鈕上動畫 stacklayout 的背景顏色

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

頁/主 common.css

StackLayout{
    background-color: #333;
}