ionic3 添加动画

• 为了让ionic app 的效果更接近原生，动画效果必不可少，在此列举两种方式添加动画。

第一种方法

• 1.install web-animations-js

npm install web-animations-js

• 2.引用

//在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)
  ]

• 3.用法

// 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';
   }

第二种方法

• 1. install css-animator

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">

• 2.引用

import { AnimatesDirective, AnimationService } from 'css-animator'

 declarations: [
    MyApp,
    AnimatesDirective
  ],
providers: [
    StatusBar,
    SplashScreen,
    AnimationService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

• 3.用法

// in HTML  点击即可看到动画
<div animates #animation="animates" text-center>
     <button ion-button (click)="animation.start({type:'shake',duration:'1000'})" >click it!</button>
 </div>