NG.org snippets - Typescript

Typescript.css

@keyframes fly {
    0%   { transform: translate(0, 0), rotate(0); }
    15%  { transform: translate(60, 0), rotate(10); }
    35%  { transform: translate(-300, 0), rotate(50); }
    36%  { transform: translate(-300, -60), rotate(-30), scale(-0.7, 0.7); }
    60%  { transform: translate(300, -60), rotate(-30), scale(-0.7, 0.7); }
    61%  { transform: translate(300, 0), rotate(50), scale(1,1); }
    100%  { transform: translate(0, 0), rotate(0); }
}

@keyframes show {
    from {opacity: 0;}
    to {opacity: 1;}
}

.go-fly {
   animation-name: fly;
   animation-duration: 3s;
}

.show {
   animation-name: show;
   animation-duration: 1s;
   animation-delay: 3s;
}

label {
    opacity: 0;
    vertical-align: center;
    text-align: center;
    color: #3C5AFD;
    font-size: 24;
    margin-bottom: 160;
}

Typescript.ts

const messages = [
    "Hi there",
    "Wazzup",
    "Ready to start?",
    "Show me the code"
];

let msg: Label;
let alien: View;

export function navigatingTo(args: EventData) {
    const page = <Page>args.object;
    msg = <Label>page.getViewById("message");
    alien = page.getViewById("alien");
}

export function onTap(args: EventData) {
    alien.className = "";
    msg.className = "";

    msg.text = messages[Math.floor(Math.random() * messages.length)];

    alien.className = "go-fly";
    msg.className = "show";
}

Typescript.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" actionBarHidden="true">
  <GridLayout>
    <Label id="message" text="Tap me" class="show"/>
    <Image src="res://alien" id="alien" tap="onTap" height="80"/>
  </GridLayout>
</Page>