Minor improvements

Author: vakrilov

README.md

@@ -0,0 +1,3 @@
+# NativeScript Routable Animations
+
+A NativeScript Angular applications showcasing [angular routable animations](https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#routable-animations).

app/app.component.ts

@@ -12,27 +12,28 @@ import {
 const slideLeft = [
  query(':leave', style({ transform: 'translateX(0)' })),
  query(':enter', style({ transform: 'translateX(-400)' })),
+
  group([
- query(':leave', animate(1000, style({ transform: 'translateX(400)' }))),
- query(':enter', animate(2000, style({ transform: 'translateX(0)' }))),
- ])
+ query(':leave', animate(500, style({ transform: 'translateX(400)' }))),
+ query(':enter', animate(500, style({ transform: 'translateX(0)' }))),
+ ], { delay: 10 }) // Needed because a wierd animation scheduling bug in IOS
 ]
 
 const slideRight = [
  query(':leave', style({ transform: 'translateX(0)'})),
  query(':enter', style({ transform: 'translateX(400)'})),
 
  group([
- query(':leave', animate(2000, style({ transform: 'translateX(-400)' }))),
- query(':enter', animate(2000, style({ transform: 'translateX(0)' }))),
- ])
+ query(':leave', animate(500, style({ transform: 'translateX(-400)' })), { delay: 100 }),
+ query(':enter', animate(500, style({ transform: 'translateX(0)' })), { delay: 100 }),
+ ], { delay: 10 }) // Needed because a wierd animation scheduling bug in IOS
 ]
 
 @Component({
  template: `
- <div [@routeAnimation]="prepRouteState(routerOutlet)">
+ <GridLayout [@routeAnimation]="prepRouteState(routerOutlet)">
  <router-outlet #routerOutlet="outlet"></router-outlet>
- </div>
+ </GridLayout>
  `,
  animations: [
  trigger('routeAnimation', [
@@ -45,7 +46,6 @@ export class AppComponent {
  prepRouteState(outlet: any) {
  return outlet.activatedRouteData['animation'] || 'firstPage'; 
  }
-
 }
 
 

app/app.module.ts

@@ -7,7 +7,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './home/home.component';
 import { SupportComponent } from './support/support.component';
 
-import { animationsTraceCategory, } from "nativescript-angular/trace";
+import { animationsTraceCategory } from "nativescript-angular/trace";
 import { setCategories, enable } from "trace";
 setCategories(animationsTraceCategory);
 enable();
@@ -20,10 +20,10 @@ enable();
  ],
  bootstrap: [AppComponent],
  imports: [
-  NativeScriptModule,
-  NativeScriptAnimationsModule,
-  AppRoutingModule,
+ NativeScriptModule,
+ NativeScriptAnimationsModule,
+ AppRoutingModule,
  ],
  schemas: [NO_ERRORS_SCHEMA],
 })
-export class AppModule {}
+export class AppModule { }

app/home/home.component.html

@@ -1,8 +1,7 @@
 <StackLayout>
- <Label text="home works!!"></Label>
- <Button text="placeholder 1"></Button>
- <Button text="placeholder 2"></Button>
+ <Label text="Home Page" class="h1 text-center"></Label>
 
- <Button [nsRouterLink]="'/support'" text="support" backgroundColor="hotpink"></Button>
+ <Button [nsRouterLink]="'/support'" text="go to support"
+ backgroundColor="hotpink"></Button>
 </StackLayout>
 

app/images/apple.jpg

@@ -1,4 +1,5 @@
 <StackLayout>
- <Label text="support works!" ></Label>
- <Button [nsRouterLink]="'/'" text="Home"></Button>
+ <Label text="Support Page" class="h1 text-center" ></Label>
+
+ <Button (tap)="router.back()" text="Go Back"></Button>
 </StackLayout>

app/support/support.component.html

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { RouterExtensions } from 'nativescript-angular/router';
 
 @Component({
  moduleId: module.id,
@@ -7,7 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SupportComponent implements OnInit {
 
- constructor() { }
+ constructor(public router: RouterExtensions) {
+ }
 
  ngOnInit() {
  }