refactor: change the position of animates.ts to utils

Change-Id: I712d76b1b327e8803d55e90b7a153ad0e44a14c9
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

3 files changed, 76 insertions, 19 deletions

diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.ts b/usecaseui-portal/src/app/shared/components/details/details.component.ts
index dea6caaa..1de80a94 100644
--- a/usecaseui-portal/src/app/shared/components/details/details.component.ts
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.ts
@@ -14,23 +14,23 @@
     limitations under the License.
 */
 import { Component, OnInit, Input } from '@angular/core';
-import { slideUpDown } from '../../../animates';
+import { slideUpDown } from '../../utils/animates';
 import { HomesService } from '../../../core/services/homes.service';
 
 @Component({
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.less'],
-  animations: [ slideUpDown ]
+  animations: [slideUpDown]
 })
 export class DetailsComponent implements OnInit {
 
-  constructor(private myhttp:HomesService) { }
+  constructor(private myhttp: HomesService) { }
 
   ngOnInit() {
   }
 
-  ngOnChanges(changes){
+  ngOnChanges(changes) {
     this.getAlarmDetailData(this.detailId);
   }
 
@@ -38,9 +38,9 @@ export class DetailsComponent implements OnInit {
 
   };
   dataillistdata: any = [];
-  getAlarmDetailData(id){
-    if(id){
-      this.myhttp.getAlarmDetailData(id).subscribe((data)=>{
+  getAlarmDetailData(id) {
+    if (id) {
+      this.myhttp.getAlarmDetailData(id).subscribe((data) => {
         this.datailheaderdata = data.alarmsHeader;
         this.dataillistdata = data.list;
       })
@@ -50,9 +50,9 @@ export class DetailsComponent implements OnInit {
   // detail Show
   moredetailShow = false;
   @Input() detailId;
-  
+
   state = 'up'
-  slideUpDown(){
+  slideUpDown() {
     this.moredetailShow = !this.moredetailShow;
     this.state = this.state === 'up' ? 'down' : 'up';
   }
diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts
index 9a601485..2f482e96 100644
--- a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts
@@ -14,33 +14,33 @@
     limitations under the License.
 */
 import { Component, OnInit, Input } from '@angular/core';
-import { slideUpDown } from '../../../animates';
+import { slideUpDown } from '../../utils/animates';
 import { HomesService } from '../../../core/services/homes.service';
 
 @Component({
   selector: 'app-performance-details',
   templateUrl: './performance-details.component.html',
   styleUrls: ['./performance-details.component.less'],
-  animations: [ slideUpDown ]
+  animations: [slideUpDown]
 })
 export class PerformanceDetailsComponent implements OnInit {
 
- 
-  constructor(private myhttp:HomesService) { }
+
+  constructor(private myhttp: HomesService) { }
 
   ngOnInit() {
-    
+
   }
 
-  ngOnChanges(changes){
+  ngOnChanges(changes) {
     console.log(this.detailId)
     this.getPerformanceHeaderDetail(this.detailId);
   }
   datailheaderdata: any = {};
   dataillistdata: any = [];
-  getPerformanceHeaderDetail(id){
-    if(id){
-      this.myhttp.getPerformanceHeaderDetail(id).subscribe((data)=>{
+  getPerformanceHeaderDetail(id) {
+    if (id) {
+      this.myhttp.getPerformanceHeaderDetail(id).subscribe((data) => {
         console.log(data)
         this.datailheaderdata = data.performanceHeader;
         this.dataillistdata = data.list;
@@ -50,7 +50,7 @@ export class PerformanceDetailsComponent implements OnInit {
   moredetailShow = false;
   @Input() detailId;
   state = 'up'
-  slideUpDown(){
+  slideUpDown() {
     this.moredetailShow = !this.moredetailShow;
     this.state = this.state === 'up' ? 'down' : 'up';
   }
diff --git a/usecaseui-portal/src/app/shared/utils/animates.ts b/usecaseui-portal/src/app/shared/utils/animates.ts
new file mode 100644
index 00000000..d5c29b7e
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/utils/animates.ts
@@ -0,0 +1,57 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+// Routing animation
+export const slideToRight = trigger('routerAnimate', [
+    // Define void to indicate empty state
+    state('void', style({ position:'fixed', zIndex:'-1' })), //I don't understand why I want to add a positioning animation to take effect.
+    // * Indicates any state
+    state('*', style({ })),
+    // Admission animation
+    transition(':enter', [
+        style({transform: 'translateX(-100%)'}),
+        animate('.5s ease-in-out')
+    ]),
+    // Opening animation
+    transition(':leave', [
+        animate('.5s ease-in-out',  style({transform: 'translateX(100%)'}) )
+    ])
+]);
+// Detail page shows hidden animation
+export const showHideAnimate = trigger('showHideAnimate', [
+    state('show', style({
+      transform: 'scale(1)',
+      display:'block',
+    })),
+    state('hide', style({
+      transform: 'scale(0)',
+      display:'none'
+    })),
+    transition('show => hide', animate('300ms ease-in')),
+    transition('hide => show', animate('300ms ease-out'))
+]);
+// Detail page shows hidden animation
+export const slideUpDown = trigger('slideUpDown', [
+    state('down', style({
+        height: "*"
+    })),
+    state('up', style({
+        height: "0"
+    })),
+    transition('down => up', animate('300ms ease-in')),
+    transition('up => down', animate('300ms ease-out'))
+]);
\ No newline at end of file