Question

我用Ionic-3作为我的大学项目，我想知道如何做按钮动画示例当我点击按钮我想要显示一些动画（看看我附图-02）其实我不会＆＃39我知道如何在离子上做这件事，看看我的附图（我不想像图像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

我解决了我的问题

需要安装此软件包npm install --save css-animator
在头部区域内的 src / index.html 内导入托管文件的链接：animate.css
导入 src / app / app.module.ts 并加载动画服务和 AnimatesDirective：

喜欢这个

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

src / pages / home / home.ts 并插入此按钮，该按钮位于具有动画指令的div块内：

喜欢这个（对于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块中包含我们的动画指令：

简单动画directiveXHTML

<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

离子按钮动画问题

1 个答案: