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的前端吗？没有我一会再问一遍--------------------------------------------------------------

Ionic4 基于ng的路由转场动画

推荐阅读更多精彩内容