角度5のアニメーション - 複数のボタンの状態遷移

Question

私は角度素材と角度5のアニメーションを使用してPWAアプリケーションで作業しています。ステッパーコンポーネントを使用していて、各ステップで2つのボタンがあります。各ボタンのホバーイベント中に状態（非アクティブ/アクティブ）アニメーションを作成したいと思います。私はこれを達成するために、各ボタンの変数/状態のバインドを個別に使用しています。しかし、それはHTMLで多くのコードのように見えます。 HostListener &のホストバインディングを使用してこれを実現し、これらのhtmlスクリプトを避ける方法はありますか？

app.component.html

ステップ - 1

<button id="login-form" [@buttonStateAnimation]="states.loginButton" (mouseenter)="toggleState('loginButton')" (mouseleave)="toggleState('loginButton')" 
      [disabled]="!loginForm.valid" mat-raised-button (click)="loginEmail()" color="primary"> 
      <span>Login</span> 
     </button> 
     <button mat-raised-button (click)="signup()" [@buttonStateAnimation]="states.signupButton" (mouseenter)="toggleState('signupButton')" 
      (mouseleave)="toggleState('signupButton')" matTooltip="New user? Sign up"> 
      <span>Sign up</span> 
     </button> 

ステップ - 2

<button matTooltip="Login with Facebook" [@socialButtonsAnimation]="states.facebookButton" (mouseenter)="toggleState('facebookButton')" 
      (mouseleave)="toggleState('facebookButton')" mat-mini-fab color="primary" (click)="loginFacebook()"> 
      <mat-icon class="fa-lg" fontSet="fontawesome" fontIcon="fa-facebook-square"></mat-icon> 
     </button> 
     <button matTooltip="Login with Google" [@socialButtonsAnimation]="states.googleButton" (mouseenter)="toggleState('googleButton')" 
      (mouseleave)="toggleState('googleButton')" mat-mini-fab color="warn" (click)="loginGoogle()"> 
      <mat-icon class="fa-lg" fontSet="fontawesome" fontIcon="fa-google"></mat-icon> 
     </button> 
     <button matTooltip="Login with Twitter" [@socialButtonsAnimation]="states.twitterButton" (mouseenter)="toggleState('twitterButton')" 
      (mouseleave)="toggleState('twitterButton')" mat-mini-fab color="primary" (click)="loginTwitter()"> 
      <mat-icon class="fa-lg" fontSet="fontawesome" fontIcon="fa-twitter"></mat-icon> 
     </button> 

app.component.ts

export class LoginComponent implements OnInit { 
    private states: any; 
    ngOnInit() { 
    this.states = { 
     loginButton: "inactive", 
     signupButton: "inactive", 
     facebookButton: "inactive", 
     googleButton: "inactive", 
     twitterButton: "inactive" 
    } 
} 
} 

animations.ts

export const buttonStateAnimation = 

trigger('buttonStateAnimation', [ 
    state('inactive', style({ transform: 'translateX(0) scale(1)' })), 
    state('active', style({ transform: 'translateX(0) scale(1.2)' })), 
    transition('inactive => active', animate('200ms ease-in')), 
    transition('active => inactive', animate('200ms ease-out')), 
    transition(
     ':enter', [ 
     style({ transform: 'scale(.7)', opacity: 0 }), 
     animate('0.3s', style({ opacity: 1, transform: 'scale(1)' })), 
     ] 
    ), 
    transition(
     ':leave', [ 
     style({ opacity: 1, transform: 'scale(1)' }), 
     animate('5.3s', style({ opacity: 0, transform: 'scale(.7)' })), 
     ] 
    ) 
    ]) 

今、上記のコードは、HTMLで反復的で醜いです。ホストバインドを使用してこれを避けて処理する方法はありますか？同時に、各ボタンの状態を個別に維持します。助けてください！！

Answer 1

はい！ディレクティブとホストバインディングとホストリスナーを使って、すべてを達成できるはずです。

import { Directive, ElementRef, HostListener, HostBinding } from '@angular/core'; 

@Directive({ 
    selector: '[socialButton]', 
}) 
export class SocialButtonDirective { 

    constructor(private ref: ElementRef) {} 

    @HostBinding('@socialButtonsAnimation') private state = 'inactive'; 

    @HostListener('mouseenter') 
    @HostListener('mouseleave') 
    private toggleState() {  
    this.state = this.state === 'inactive' ? 'active': 'inactive'; 
    } 
} 

あなたはまだそれが正しく動作するために、このディレクティブが使用されているコンポーネントにアニメーションの定義をインポートする必要があります。ここではラフ（未テスト）の例です。