--- 寫在前面：
最近要搞一個(gè)app的商城，準(zhǔn)備用ionic，之前用過apicloud 感覺開發(fā)體驗(yàn)不是太好喳整，我是用vue寫的寫完之后 借助apicloud進(jìn)行打包簽名發(fā)布 還用到里面的一些原生的功能尔苦。
然后去了 ionic的官網(wǎng) 發(fā)現(xiàn)升級(jí)到4.x了 路由用的ng的，感覺更像寫ng了 廢話到此為止 上代碼
1 在app.module.ts 先引入 BrowserAnimationsModule 又官， 注入到imports
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2 新建一個(gè)ainimate.ts文件 內(nèi)容如下 ,主要定義了 一份 路由轉(zhuǎn)場的動(dòng)畫，親測之后 發(fā)現(xiàn)有點(diǎn)難看漫试，不過里面的動(dòng)畫參數(shù) 可自行修改六敬。
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 之后就是在各個(gè)組件里面使用 本來想搞個(gè)全局的 但是沒搞出來 等我研究出來 再發(fā)啊驾荣！
例如在 login組件里面使用 （每個(gè)需要轉(zhuǎn)場動(dòng)畫的組件都要加Ｍ夤埂！２ブ馈）
import { Component, OnInit ,HostBinding} from '@angular/core';
import {slideToRight} from '../../animate';
// 路由動(dòng)畫中必須使用 HostBinding模式审编，不能直接在element上綁定
// 引入剛才的animate 定義動(dòng)畫文件
@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) {
}
}
到這里就結(jié)束了般码！ 像上面的例子一樣 每個(gè)需要路由轉(zhuǎn)場動(dòng)畫 都需要加這些東西。 如果大家還有什么好的其他方案乱顾，希望能分享出來板祝。我也是 各種谷歌 開始是參照 ng官網(wǎng)的路由動(dòng)畫 但是沒寫出來 ，搞出來 第一時(shí)間分享出來 希望能幫到有需要的人 哇咔咔走净！ ----------------題外話分界線---------------------------------------------------------------------------沈陽有招ng的前端嗎券时？沒有我一會(huì)再問一遍--------------------------------------------------------------
