otf-frontend/client/src/app/router.animations.ts

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\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
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\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
  15 \r
  16 \r
  17 import { animate, group, query, state, style, transition, trigger } from '@angular/animations';\r
  18 \r
  19 export function routerTransition() {\r
  20     return slideToTop();\r
  21 }\r
  22 \r
  23 export function routerLeftTransition() {\r
  24     return slideToLeft();\r
  25 }\r
  26 \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
  34         ]),\r
  35         transition(':leave', [\r
  36             style({ transform: 'translateX(0%)' }),\r
  37             animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))\r
  38         ])\r
  39     ]);\r
  40 }\r
  41 \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
  49         ]),\r
  50         transition(':leave', [\r
  51             style({ transform: 'translateX(0%)' }),\r
  52             animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))\r
  53         ])\r
  54     ]);\r
  55 }\r
  56 \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
  64         ]),\r
  65         transition(':leave', [\r
  66             style({ transform: 'translateY(0%)' }),\r
  67             animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))\r
  68         ])\r
  69     ]);\r
  70 }\r
  71 \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
  79         ]),\r
  80         transition(':leave', [\r
  81             style({ transform: 'translateY(0%)' }),\r
  82             animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))\r
  83         ])\r
  84     ]);\r
  85 }\r
  86 \r
  87   \r
  88 export function routerTransitionCustom() {\r
  89     alert("");\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
  96     query(':enter',\r
  97         style({\r
  98         position: 'fixed',\r
  99         width: '100%',\r
 100         transform: 'translateX(-100%)'\r
 101         }), { optional: true }),\r
 102     // move page off screen right on leave\r
 103     query(':leave',\r
 104         animate('500ms ease',\r
 105         style({\r
 106             position: 'fixed',\r
 107             width: '100%',\r
 108             transform: 'translateX(100%)',\r
 109         })\r
 110         ), { optional: true }),\r
 111     // move page in screen from left to right\r
 112     query(':enter',\r
 113         animate('500ms ease',\r
 114         style({\r
 115             opacity: 1,\r
 116             transform: 'translateX(0%)'\r
 117         })\r
 118         ), { optional: true }),\r
 119     ]),\r
 120     // LEFT TO RIGHT AKA PREVIOUS\r
 121     transition('* => 1', [\r
 122     // Initial state of new route\r
 123     query(':enter',\r
 124         style({\r
 125         position: 'fixed',\r
 126         width: '100%',\r
 127         transform: 'translateX(-100%)'\r
 128         }), { optional: true }),\r
 129     // move page off screen right on leave\r
 130     query(':leave',\r
 131         animate('500ms ease',\r
 132         style({\r
 133             position: 'fixed',\r
 134             width: '100%',\r
 135             transform: 'translateX(100%)',\r
 136         })\r
 137         ), { optional: true }),\r
 138     // move page in screen from left to right\r
 139     query(':enter',\r
 140         animate('500ms ease',\r
 141         style({\r
 142             opacity: 1,\r
 143             transform: 'translateX(0%)'\r
 144         })\r
 145         ), { optional: true }),\r
 146     ]),\r
 147     // RIGHT TO LEFT AKA NEXT\r
 148     transition('* => 2', [\r
 149     // Initial state of new route\r
 150     query(':enter',\r
 151         style({\r
 152         position: 'fixed',\r
 153         width: '100%',\r
 154         transform: 'translateX(100%)'\r
 155         }), { optional: true }),\r
 156     // move page off screen right on leave\r
 157     query(':leave',\r
 158         animate('500ms ease',\r
 159         style({\r
 160             position: 'fixed',\r
 161             width: '100%',\r
 162             transform: 'translateX(-100%)',\r
 163         })\r
 164         ), { optional: true }),\r
 165     // move page in screen from left to right\r
 166     query(':enter',\r
 167         animate('500ms ease',\r
 168         style({\r
 169             opacity: 1,\r
 170             transform: 'translateX(0%)'\r
 171         })\r
 172         ), { optional: true }),\r
 173     ])\r
 174     \r
 175     ]);\r
 176    \r
 177 }\r
 178