1 /* Copyright (c) 2019 AT&T Intellectual Property. #
\r
3 # Licensed under the Apache License, Version 2.0 (the "License"); #
\r
4 # you may not use this file except in compliance with the License. #
\r
5 # You may obtain a copy of the License at #
\r
7 # http://www.apache.org/licenses/LICENSE-2.0 #
\r
9 # Unless required by applicable law or agreed to in writing, software #
\r
10 # distributed under the License is distributed on an "AS IS" BASIS, #
\r
11 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. #
\r
12 # See the License for the specific language governing permissions and #
\r
13 # limitations under the License. #
\r
14 ##############################################################################*/
\r
17 import { animate, group, query, state, style, transition, trigger } from '@angular/animations';
\r
19 export function routerTransition() {
\r
20 return slideToTop();
\r
23 export function routerLeftTransition() {
\r
24 return slideToLeft();
\r
27 export function slideToRight() {
\r
28 return trigger('routerTransition', [
\r
29 state('void', style({})),
\r
30 state('*', style({})),
\r
31 transition(':enter', [
\r
32 style({ transform: 'translateX(-100%)' }),
\r
33 animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
\r
35 transition(':leave', [
\r
36 style({ transform: 'translateX(0%)' }),
\r
37 animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
\r
42 export function slideToLeft() {
\r
43 return trigger('routerTransition', [
\r
44 state('void', style({})),
\r
45 state('*', style({})),
\r
46 transition(':enter', [
\r
47 style({ transform: 'translateX(100%)' }),
\r
48 animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
\r
50 transition(':leave', [
\r
51 style({ transform: 'translateX(0%)' }),
\r
52 animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
\r
57 export function slideToBottom() {
\r
58 return trigger('routerTransition', [
\r
59 state('void', style({})),
\r
60 state('*', style({})),
\r
61 transition(':enter', [
\r
62 style({ transform: 'translateY(-100%)' }),
\r
63 animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
\r
65 transition(':leave', [
\r
66 style({ transform: 'translateY(0%)' }),
\r
67 animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))
\r
72 export function slideToTop() {
\r
73 return trigger('routerTransition', [
\r
74 state('void', style({})),
\r
75 state('*', style({})),
\r
76 transition(':enter', [
\r
77 style({ transform: 'translateY(100%)' }),
\r
78 animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
\r
80 transition(':leave', [
\r
81 style({ transform: 'translateY(0%)' }),
\r
82 animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
\r
88 export function routerTransitionCustom() {
\r
90 return trigger('routerAnimation', [
\r
91 state('void', style({})),
\r
92 state('*', style({})),
\r
93 // LEFT TO RIGHT AKA RESET
\r
94 transition('* => 0', [
\r
95 // Initial state of new route
\r
100 transform: 'translateX(-100%)'
\r
101 }), { optional: true }),
\r
102 // move page off screen right on leave
\r
104 animate('500ms ease',
\r
108 transform: 'translateX(100%)',
\r
110 ), { optional: true }),
\r
111 // move page in screen from left to right
\r
113 animate('500ms ease',
\r
116 transform: 'translateX(0%)'
\r
118 ), { optional: true }),
\r
120 // LEFT TO RIGHT AKA PREVIOUS
\r
121 transition('* => 1', [
\r
122 // Initial state of new route
\r
127 transform: 'translateX(-100%)'
\r
128 }), { optional: true }),
\r
129 // move page off screen right on leave
\r
131 animate('500ms ease',
\r
135 transform: 'translateX(100%)',
\r
137 ), { optional: true }),
\r
138 // move page in screen from left to right
\r
140 animate('500ms ease',
\r
143 transform: 'translateX(0%)'
\r
145 ), { optional: true }),
\r
147 // RIGHT TO LEFT AKA NEXT
\r
148 transition('* => 2', [
\r
149 // Initial state of new route
\r
154 transform: 'translateX(100%)'
\r
155 }), { optional: true }),
\r
156 // move page off screen right on leave
\r
158 animate('500ms ease',
\r
162 transform: 'translateX(-100%)',
\r
164 ), { optional: true }),
\r
165 // move page in screen from left to right
\r
167 animate('500ms ease',
\r
170 transform: 'translateX(0%)'
\r
172 ), { optional: true }),
\r