- 为了让ionic app 的效果更接近原生，动画效果必不可少，在此列举两种方式添加动画。
第一种方法
- 1.install web-animations-js
npm install web-animations-js
//在main.ts 导入
import 'web-animations-js/web-animations.min';
//在app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
imports: [
BrowserModule,
BrowserAnimationsModule,
IonicModule.forRoot(MyApp)
]
// in HTML
<button ion-button (click)="fadeIt()" >fade it!</button>
<p [@fading] = 'visableState'>hhhahahahahhaha</p>
// in .ts
import { trigger ,state,transition,animate,style} from "@angular/animations";
@Component({
selector: 'page-home',
templateUrl: 'home.html',
animations:[
trigger('fading',[
state('visable',style({
opacity: 1
})),
state('invisable', style({
opacity: 0
})),
transition('* => *',animate('.5s'))
])
]
})
// in export class xxPage
visableState = 'visable';
fadeIt(){
this.visableState = (this.visableState == 'visable')?'invisable':'visable';
}
第二种方法
npm install css-animator
// in index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
import { AnimatesDirective, AnimationService } from 'css-animator'
declarations: [
MyApp,
AnimatesDirective
],
providers: [
StatusBar,
SplashScreen,
AnimationService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
// in HTML 点击即可看到动画
<div animates #animation="animates" text-center>
<button ion-button (click)="animation.start({type:'shake',duration:'1000'})" >click it!</button>
</div>
