--- 写在前面：
最近要搞一个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的前端吗？没有我一会再问一遍--------------------------------------------------------------
