角度4動畫所有元素正在觸發

我正在嘗試將動畫觸發器添加到由*ngFor生成的組件。這個想法是點擊一個按鈕並運行一個方法來改變動畫狀態並翻轉與按鈕相關的組件。角度4動畫所有元素正在觸發

我的問題是當我點擊按鈕的所有組件，有動畫觸發器翻轉。我明白爲什麼（所有人都使用同一個擁有動畫狀態的類屬性）......但我可以弄清楚如何得到我需要的東西。

這裏我的代碼

barracks.html

<ion-content padding> 
    <ion-grid> 
    <ion-row *ngIf="playerTeamSize != undefined"> 
     <div [ngSwitch]="playerTeamSize" class="barrackTitle"> 
     <p *ngSwitchCase="-1">Finally you are here. Please pick a warrior</p> 
     <p *ngSwitchCase="0">You have no team. You need at least one fighter to survive</p> 
     <p *ngSwitchCase="maxTeamSize">Your team is full. Go and explore the world</p> 
     <p *ngSwitchDefault>You have {{maxTeamSize - playerTeamSize}} free spots in your team. Pick another warrior</p> 
     </div> 
    </ion-row> 
    <ion-row class="characterCardWrapper"> 
     <ion-col class="characterCard" col-6 *ngFor="let character of characters"> 
     <div [@myAnimation]="animationState"> 
      <character-full [model]="character" (onSelected)="onSelected($event)"> 
      </character-full> 
     </div> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 
</ion-content>

barracks.ts

import { HireCharacter } from './../../engine/D6/Character.commands'; 
    import { CharacterModel } from './../../components/models/character.model'; 
    import { HomePage } from './../home/home'; 
    import { Realm } from './../../engine/GameObjects/GORealm'; 
    import { CharacterFullComponent } from './../../components/characterFull/character-full.component'; 
    import { PlayerService } from './../../app/player.service'; 
    import { KingdomService } from './../../app/kingdom.service'; 
    import { TransitiveCompileNgModuleMetadata } from '@angular/compiler'; 
    import { Component, Input } from '@angular/core'; 
    import { NavController, NavParams } from 'ionic-angular'; 
    import { Organization } from './../../engine/GameObjects/Components/Organization'; 
    import { trigger, state, style, animate, transition } from '@angular/animations'; 

    @Component({ 
     selector: 'page-barracks', 
     templateUrl: 'barracks.html', 
     providers: [CharacterFullComponent], 
     animations: [ 
     trigger('myAnimation', [ 
      state('idle', style({ transform: 'rotateY(0deg)'})), 
      state('flip', style({ transform: 'rotateY(180deg)'})), 
      transition('idle => flip', animate('2s ease-in')) 
     ]) 
     ] 
    }) 

    export class BarracksPage { 

     characters = [] 
     characterIdxMap: { [name: string]: number } = {} 
     wait = false 
     selected = false 
     playerTeamSize 
     maxTeamSize = 4 
     barracksFirstTime = false 
     animationState = 'idle' 

     constructor(public navCtrl: NavController, private kingdom: KingdomService, private player: PlayerService) { } 

     onSelected(character: any) { 
     this.animationState = 'flip' 
     } 
    }

來源

2017-07-13 Pato Salazar

我最終什麼事做的是移動的動畫觸發（和代碼）成分本身，所以我們可以封裝觸發動畫的類屬性。現在都好。

來源

2017-07-17 04:30:52

角度4動畫所有元素正在觸發

回答

相關問題