Ionic4 基于ng的路由转场动画

--- 写在前面：
最近要搞一个app的商城，准备用ionic，之前用过apicloud 感觉开发体验不是太好，我是用vue写的写完之后 借助apicloud进行打包签名发布 还用到里面的一些原生的功能。
然后去了 ionic的官网 发现升级到4.x了 路由用的ng的，感觉更像写ng了 废话到此为止 上代码

1 在app.module.ts 先引入 BrowserAnimationsModule ， 注入到imports

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2 新建一个ainimate.ts文件 内容如下 ,主要定义了 一份 路由转场的动画，亲测之后 发现有点难看，不过里面的动画参数 可自行修改。

import { trigger, style, state, transition, animate, group } from '@angular/animations';

export const slideToRight = trigger('routeAnim', [
  state('void', style({ 'position': 'fixed', 'width': '100%', 'height': '100%' })),
  state('*', style({ 'position': 'fixed', 'width': '100%', 'height': '100%' })),
  transition(':enter', [
    style({ 'transform': 'translateX(200%)', 'opacity': '0' }),
    group([
      animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ 'transform': 'translateX(0%)' })),
      animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ 'opacity': '1' }))
    ])
  ]),
  transition(':leave', [
    style({ 'transform': 'translateX(0%)', 'opacity': '1' }),
    group([
      animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ 'transform': 'translateX(-100%)' })),
      animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ 'opacity': '0' }))
    ])
  ]),
]);

3 之后就是在各个组件里面使用 本来想搞个全局的 但是没搞出来 等我研究出来 再发啊！
例如在 login组件里面使用 （每个需要转场动画的组件都要加！！！）

import { Component, OnInit ,HostBinding} from '@angular/core';
import {slideToRight} from '../../animate';
//  路由动画中必须使用 HostBinding模式，不能直接在element上绑定
//  引入刚才的animate 定义动画文件
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
  animations: [   // 这里别忘了！！！
    slideToRight
  ]
})

export class LoginPage implements OnInit { 
  @HostBinding('@routeAnim') state;  // 最后一步！！！

  constructor(public nativePageTransitions: NativePageTransitions,public router: Router) { 
    
  }
}

到这里就结束了！ 像上面的例子一样 每个需要路由转场动画 都需要加这些东西。 如果大家还有什么好的其他方案，希望能分享出来。我也是 各种谷歌 开始是参照 ng官网的路由动画 但是没写出来 ，搞出来 第一时间分享出来 希望能帮到有需要的人 哇咔咔！ ----------------题外话分界线---------------------------------------------------------------------------沈阳有招ng的前端吗？没有我一会再问一遍--------------------------------------------------------------