ionic4 페이지 오른쪽 슬라이딩 애니메이션 효과 구현
import { MyApp } from "./app.component";
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { RouteReuseStrategy } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { IonicGestureConfig } from './IonicGestureConfig';
import { CommonModule } from '@angular/common';
import { Animation } from '@ionic/core';
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
CommonModule,
IonicModule.forRoot({
backButtonText: '',
mode: "md",
navAnimation: (AnimationC: Animation, baseEl: any, position?: any): Promise => {
const baseAnimation = new AnimationC();
const hostEl = (baseEl.host || baseEl) as HTMLElement;
const wrapperAnimation = new AnimationC();
const wrapperAnimation2 = new AnimationC();
if (position.direction == "forward") {
wrapperAnimation.addElement(position.enteringEl);
wrapperAnimation.fromTo('transform', `translateX(100%)`, 'translateX(0px)');
wrapperAnimation.fromTo('opacity', 0.3, 1);
wrapperAnimation2.addElement(position.leavingEl);
wrapperAnimation2.fromTo('transform', `translateX(0)`, 'translateX(-50%)');
wrapperAnimation2.fromTo('opacity', 1, 0.5);
}
if (position.direction == "back") {
wrapperAnimation.addElement(position.leavingEl);
wrapperAnimation.fromTo('transform', `translateX(0)`, 'translateX(100%)');
wrapperAnimation.fromTo('opacity', 1, 0);
wrapperAnimation2.addElement(position.enteringEl);
wrapperAnimation2.fromTo('transform', `translateX(-90%)`, 'translateX(0)');
wrapperAnimation2.fromTo('opacity', 0.5, 1);
}
return Promise.resolve(baseAnimation
.addElement(hostEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(600)
.add(wrapperAnimation)
.add(wrapperAnimation2));
}
}),
AppRoutingModule
],
bootstrap: [MyApp],
entryComponents: [],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
]
})
export class AppModule { }
키 코드
app.module.ts
그 부분을 붙이면 사용할 수 있어요.(오리지널 문장, 전재 출처를 밝혀 주십시오, 감사합니다)
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.