Commit 9c8158f8 authored by 神楽坂玲奈's avatar 神楽坂玲奈

导航动画

parent 8104fb67
...@@ -8,12 +8,14 @@ import 'rxjs/add/operator/toPromise'; ...@@ -8,12 +8,14 @@ import 'rxjs/add/operator/toPromise';
import { LoginService } from '../login.service'; import { LoginService } from '../login.service';
import { MatchDialog } from '../match/match.component'; import { MatchDialog } from '../match/match.component';
import { YGOProService } from '../ygopro.service'; import { YGOProService } from '../ygopro.service';
import { routerTransition2 } from '../router.animations';
@Component({ @Component({
selector: 'app-lobby', selector: 'app-lobby',
templateUrl: 'lobby.component.html', templateUrl: 'lobby.component.html',
styleUrls: ['lobby.component.css'] styleUrls: ['lobby.component.css'],
animations: [routerTransition2],
host: {'[@routerTransition2]': ''}
}) })
export class LobbyComponent { export class LobbyComponent {
......
...@@ -2,12 +2,15 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; ...@@ -2,12 +2,15 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
import { MdSnackBar } from '@angular/material'; import { MdSnackBar } from '@angular/material';
import { LoginService } from '../login.service'; import { LoginService } from '../login.service';
import { YGOProService } from '../ygopro.service'; import { YGOProService } from '../ygopro.service';
import { routerTransition } from '../router.animations';
@Component({ @Component({
selector: 'app-new-room', selector: 'app-new-room',
templateUrl: 'new-room.component.html', templateUrl: 'new-room.component.html',
styleUrls: ['new-room.component.css'] styleUrls: ['new-room.component.css'],
animations: [routerTransition],
host: {'[@routerTransition]': ''}
}) })
export class NewRoomComponent { export class NewRoomComponent {
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
} }
md-table { md-table {
......
...@@ -6,10 +6,15 @@ import 'rxjs/Rx'; ...@@ -6,10 +6,15 @@ import 'rxjs/Rx';
import { LoginService } from '../login.service'; import { LoginService } from '../login.service';
import { RoomListDataSource, YGOProService } from '../ygopro.service'; import { RoomListDataSource, YGOProService } from '../ygopro.service';
import { routerTransition } from '../router.animations';
@Component({ @Component({
selector: 'app-room-list', selector: 'app-room-list',
styleUrls: ['room-list.component.css'], styleUrls: ['room-list.component.css'],
templateUrl: 'room-list.component.html', templateUrl: 'room-list.component.html',
animations: [routerTransition],
host: {'[@routerTransition]': ''}
}) })
export class RoomListComponent { export class RoomListComponent {
displayedColumns = ['title', 'users', 'mode', 'extra']; displayedColumns = ['title', 'users', 'mode', 'extra'];
......
// // 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%)' }))
])
]);
import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service'; import { LoginService } from '../login.service';
import { RoomListDataSource, YGOProService } from '../ygopro.service'; import { RoomListDataSource, YGOProService } from '../ygopro.service';
import { routerTransition } from '../router.animations';
@Component({ @Component({
selector: 'app-watch', selector: 'app-watch',
templateUrl: './watch.component.html', templateUrl: './watch.component.html',
styleUrls: ['./watch.component.css'] styleUrls: ['./watch.component.css'],
animations: [routerTransition],
host: {'[@routerTransition]': ''}
}) })
export class WatchComponent implements OnInit { export class WatchComponent implements OnInit {
......
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { LoginService } from '../login.service'; import { LoginService } from '../login.service';
import { YGOProService } from '../ygopro.service'; import { YGOProService } from '../ygopro.service';
import { routerTransition } from '../router.animations';
@Component({ @Component({
selector: 'app-windbot', selector: 'app-windbot',
templateUrl: './windbot.component.html', templateUrl: './windbot.component.html',
styleUrls: ['./windbot.component.css'] styleUrls: ['./windbot.component.css'],
animations: [routerTransition],
host: {'[@routerTransition]': ''}
}) })
export class WindbotComponent { export class WindbotComponent {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment