导航动画

src/app/lobby/lobby.component.ts

@@ -8,12 +8,14 @@ import 'rxjs/add/operator/toPromise';
 import { LoginService } from '../login.service';
 import { MatchDialog } from '../match/match.component';
 import { YGOProService } from '../ygopro.service';
-
+import { routerTransition2 } from '../router.animations';
 
 @Component({
   selector: 'app-lobby',
   templateUrl: 'lobby.component.html',
-  styleUrls: ['lobby.component.css']
+  styleUrls: ['lobby.component.css'],
+  animations: [routerTransition2],
+  host: {'[@routerTransition2]': ''}
 })
 export class LobbyComponent {
 

src/app/new-room/new-room.component.ts

@@ -2,12 +2,15 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { MdSnackBar } from '@angular/material';
 import { LoginService } from '../login.service';
 import { YGOProService } from '../ygopro.service';
+import { routerTransition } from '../router.animations';
 
 
 @Component({
   selector: 'app-new-room',
   templateUrl: 'new-room.component.html',
-  styleUrls: ['new-room.component.css']
+  styleUrls: ['new-room.component.css'],
+  animations: [routerTransition],
+  host: {'[@routerTransition]': ''}
 })
 export class NewRoomComponent {
 

src/app/room-list/room-list.component.css

@@ -11,6 +11,7 @@
 :host {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 md-table {

src/app/room-list/room-list.component.ts

@@ -6,10 +6,15 @@ import 'rxjs/Rx';
 import { LoginService } from '../login.service';
 import { RoomListDataSource, YGOProService } from '../ygopro.service';
 
+import { routerTransition } from '../router.animations';
+
+
 @Component({
   selector: 'app-room-list',
   styleUrls: ['room-list.component.css'],
   templateUrl: 'room-list.component.html',
+  animations: [routerTransition],
+  host: {'[@routerTransition]': ''}
 })
 export class RoomListComponent {
   displayedColumns = ['title', 'users', 'mode', 'extra'];

src/app/router.animations.ts

+// // import the required animation functions from the angular animations module
+// import { trigger, state, animate, transition, style } from '@angular/animations';
+//
+// export const slideInOutAnimation =
+//   // trigger name for attaching this animation to an element using the [@triggerName] syntax
+//   trigger('slideInOutAnimation', [
+//
+//     // end state styles for route container (host)
+//     state('*', style({
+//       // the view covers the whole screen with a semi tranparent background
+//       position: 'fixed',
+//       top: 0,
+//       left: 0,
+//       right: 0,
+//       bottom: 0,
+//       backgroundColor: 'rgba(0, 0, 0, 0.8)'
+//     })),
+//
+//     // route 'enter' transition
+//     transition(':enter', [
+//
+//       // styles at start of transition
+//       style({
+//         // start with the content positioned off the right of the screen,
+//         // -400% is required instead of -100% because the negative position adds to the width of the element
+//         right: '-400%',
+//
+//         // start with background opacity set to 0 (invisible)
+//         backgroundColor: 'rgba(0, 0, 0, 0)'
+//       }),
+//
+//       // animation and styles at end of transition
+//       animate('5s ease-in-out', style({
+//         // transition the right position to 0 which slides the content into view
+//         right: 0,
+//
+//         // transition the background opacity to 0.8 to fade it in
+//         backgroundColor: 'rgba(0, 0, 0, 0.8)'
+//       }))
+//     ]),
+//
+//     // route 'leave' transition
+//     transition(':leave', [
+//       // animation and styles at end of transition
+//       animate('5s ease-in-out', style({
+//         // transition the right position to -400% which slides the content out of view
+//         right: '-400%',
+//
+//         // transition the background opacity to 0 to fade it out
+//         backgroundColor: 'rgba(0, 0, 0, 0)'
+//       }))
+//     ])
+//   ]);
+
+import { animate, state, style, transition, trigger } from '@angular/animations';
+export const routerTransition = trigger('routerTransition', [
+  state('void', style({ position: 'fixed', width: '100%' })),
+  state('*', style({ position: 'fixed', width: '100%' })),
+  transition(':enter', [  // before 2.1: transition('void => *', [
+    style({ transform: 'translateX(100%)' }),
+    animate('.5s ease-in-out', style({ transform: 'translateX(0%)' }))
+  ]),
+  transition(':leave', [  // before 2.1: transition('* => void', [
+    style({ transform: 'translateX(0%)' }),
+    animate('.5s ease-in-out', style({ transform: 'translateX(100%)' }))
+  ])
+]);
+export const routerTransition2 = trigger('routerTransition2', [
+  state('void', style({ position: 'fixed', width: '100%' })),
+  state('*', style({ position: 'fixed', width: '100%' })),
+  transition(':enter', [  // before 2.1: transition('void => *', [
+    style({ transform: 'translateX(-100%)' }),
+    animate('.5s ease-in-out', style({ transform: 'translateX(0%)' }))
+  ]),
+  transition(':leave', [  // before 2.1: transition('* => void', [
+    style({ transform: 'translateX(0%)' }),
+    animate('.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
+  ])
+]);

src/app/watch/watch.component.ts

 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { LoginService } from '../login.service';
 import { RoomListDataSource, YGOProService } from '../ygopro.service';
+import { routerTransition } from '../router.animations';
 
 @Component({
   selector: 'app-watch',
   templateUrl: './watch.component.html',
-  styleUrls: ['./watch.component.css']
+  styleUrls: ['./watch.component.css'],
+  animations: [routerTransition],
+  host: {'[@routerTransition]': ''}
 })
 export class WatchComponent implements OnInit {
 

src/app/windbot/windbot.component.ts

 import { Component } from '@angular/core';
 import { LoginService } from '../login.service';
 import { YGOProService } from '../ygopro.service';
+import { routerTransition } from '../router.animations';
 
 @Component({
   selector: 'app-windbot',
   templateUrl: './windbot.component.html',
-  styleUrls: ['./windbot.component.css']
+  styleUrls: ['./windbot.component.css'],
+  animations: [routerTransition],
+  host: {'[@routerTransition]': ''}
 })
 export class WindbotComponent {