【Ionic3】clickでクラスを付与してアニメーションさせる

Ionic3, Angular4でクラスの付け替えは、ngClassで行うことが多いかと思います。

ngClassでは、変数で状態とViewが紐づく形となります。

しかし、クリックした時にアニメーションさせるだけのクラスを付与したいという場合もあります。

そこで、私なりに調べて実現した方法を紹介します。

ボタンをクリックしたら、別の要素がアニメーションする、という想定です。

<!-- home.html -->

<!-- アニメーション開始ボタン -->
<div *ngFor="let item of items; let i = index">
    <button (click)="animationStart('#target-' + i);" ion-button primary tappable>animation start {{i}}</button>
</div>

<!-- アニメーションさせる要素 -->
<div *ngFor="let item of items; let i = index">
    <div id="target-{{i}}" (animationend)="animationEnd($event);">animation target {{i}}</div>
</div>

ngForで複数のボタンと、それに対応するdivタグを生成しています。

ボタンには、animation用のクラスを付与するメソッドをclickイベントに登録しています。

引数には、対象となる要素のidを指定しています。

対象となる要素には、付与したクラスを削除するためのメソッドを、animationendイベントに登録しています。

// home.ts

import { Component, ElementRef, Renderer2 } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private _el: HTMLElement;
  // viewでngForに使うだけの配列
  items = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  
  constructor
  (
    public navCtrl: NavController,
    public el: ElementRef,
    public renderer: Renderer2
  ) {
    this._el = el.nativeElement;
  }
  
  animationStart(target) {
    let targetEl = this._el.querySelector(target);
    this.renderer.addClass(targetEl, 'bounce-top');
  }

  animationEnd(event) {
    event.target.classList.remove('bounce-top');
  }
}

ElementRefでDOMにアクセスし、querySelectorでアニメーション対象を取得しています。

Renderer2でElementの操作を行えるので、アニメーション用に作成した「.bounce-top」クラスを対象の要素に付与しています。

クリックするたびにアニメーションさせたいので、アニメーションが終了したら「.bounce-top」クラスは削除しています。

Angularアプリケーションプログラミング

山田 祥寛

Angularによる動的Webアプリケーション開発に必要となる知識が、この1冊で身に付きます!

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

榊原 昌彦

Ionicの最大の特徴は、UIデザインの良さです。海外には多くのユーザがいますが、その多くは「UIデザインがいいからIonicにした」と答えています。