Angular 4 动画完成回调在加载时被调用

Question

我正在尝试对 Angular 4 动画使用 done 回调。我想在缩放动画完成后handleDone运行该方法。但是，当页面由于某种原因加载时，它会运行。我正在使用NgZones运行一些消息传递，但我认为这可能会导致问题。

更新：只需控制台事件对象并说它正在从void到init....不知道为什么在加载时触发

这是我的代码。感谢所有建议

barracks.ts

import { CharacterModel } from './../models/character.model';
import { GOSprite } from './../../providers/go-sprite';
import * as PIXI from 'pixi.js'
import { GameObjectSprite } from './../../2d/GameObjectSprite';
import { Attribute } from './../../engine/D6/enums';
import { AttributeSkillTuple } from './../../engine/D6/Character';
import { SpecialAbilityPipe } from './special-ability-filter';
import { SpecialAbilities, Skill } from './../../engine/D6/enums';
import { SpecialAbility } from './../../engine/GameObjects/Modifiers/SpecialAbility';
import { Component, EventEmitter, Input, Output, ViewChild, ElementRef, OnInit, Injectable, SimpleChanges, AnimationTransitionEvent, NgZone } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
selector: 'character-full',
templateUrl: './character-full.component.html',
providers: [GOSprite],
animations: [
trigger('myAnimation', [
state('init', style({ transform: 'scale(1)' , opacity: '1'})),
state('scaleDown', style({ transform: 'scale(0)' , opacity: '0'})),
transition('init => scaleDown', animate('0.5s ease-in'))
])
]
})
export class CharacterFullComponent implements OnInit {
@ViewChild('characterCanvas') canvasWrapper: ElementRef;
@Input() model: CharacterModel
@Output() onSelected = new EventEmitter<any>()
@Output() onIncreaseSkill = new EventEmitter<any>()
@Output() onEquipmentToggle = new EventEmitter<any>()
selected = false
skillsTabs = {
showTab1: true,
showTab2: false,
showTab3: false
}
characterSpriteContainer: any
animationState = 'init'
constructor(private GOSprite: GOSprite, private NgZone:NgZone ) { }
ngOnInit() {
console.log('character init')
//let characterSprite = new GameObjectSprite('../../assets/sprites/')
}

selectCharacter() {
this.selected = true
this.animationState = 'scaleDown'
this.onSelected.emit(this.model.character)
}

handleDone = (event:any) => {
console.log('Animation Done')
}
}

myComponent.html

<ion-card>
<div class="cardHeader">
<h1 class="name" wrap>{{model.character.name}}</h1>
</div>
<div *ngIf="animationState == 'done'"> 
<spinner></spinner>
<p>Travelling to Homebase</p>
</div>
<ion-item [@myAnimation]="animationState" (@myAnimation.done)=handleDone($event)>
<p>SAMPLE</p>
<ion-row *ngIf="model.selectable">
<button class="selectButton" ion-button round outline small (click)="selectCharacter()">Select</button>
</ion-row>
</ion-item>
</ion-card>

Answer 1

尝试检查handleDone方法中事件参数内的"fromState"和"toState"字段。我想你会看到过渡"void => init">

Answer 2

我不知道你是否已经解决了这个问题。解决方案是包装

this.selected = true
this.animationState = 'scaleDown'
this.onSelected.emit(this.model.character)

在ngZone内部。

this.ngZone.run(() => {
this.selected = true
this.animationState = 'scaleDown'
this.onSelected.emit(this.model.character)
})