css - ionic 按钮动画问题

Question

我在我的大学元素中使用了Ionic-3，我想知道当我点击我想显示一些动画的按钮时如何做按钮动画示例(看我的附件图像-02)实际上我不知道如何在 ionic 上做到这一点，看看我附加的图像(我不想像 image-02 那样，我想知道如何为按钮、一些开始或移动制作简单的动画和飞行或任何东西)

图片-01

Image-02(我想知道怎么做)

我的代码

<div class="login-box">
 <ion-row>
      <ion-col class="signup-col">
        <button ion-button class="submit-btn" full  [navPush]="addnewPage">Add New</button>

      </ion-col>


    </ion-row>

    <ion-row>
      <ion-col class="signup-col">
        <button ion-button class="submit-btn" full   [navPush]="storePage" > Add Store</button>

      </ion-col>
</ion-row>
</div>

Answer 1

我的问题解决了

1. 需要安装这个包npm install --save css-animator
2. 在我们的 src/index.html 头部区域的某处导入一个指向托管文件的链接:animate.css
3. 导入 src/app/app.module.ts 并加载 AnimationService 和 AnimatesDirective:

像这样

 `import { AnimationService, AnimatesDirective } from 'css-animator';
     declarations: [
        ...
        AnimatesDirective
     ]
     providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        AnimationService
      ]`

1. src/pages/home/home.ts 并插入此按钮，该按钮位于具有我们的动画指令的 div block 内:

像这样(对于 flipInX)

 import { Component, ViewChild } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import { AnimationService, AnimationBuilder } from 'css-animator';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('myElement') myElem;
  private animator: AnimationBuilder;

  constructor(public navCtrl: NavController, animationService: AnimationService) {
    this.animator = animationService.builder();
  }

  animateElem() {
    this.animator.setType('flipInX').show(this.myElem.nativeElement);
  }
}

5.在div里面具有我们的动画指令的 block :

简单的动画指令XHTML

<ion-content padding>
<div animates #animation="animates" text-center>
<button ion-button (click)="animation.start({type: 'rubberBand', duration: '1000'})">Click me!</button>
</div>
</ion-content>

它对我有用

了解更多 How to Add Animations To Your Ionic App