Question

我正在尝试使用完成回调Angular 4动画。我想在缩放动画完成时运行方法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)
})

Angular 4动画完成了在Load上调用的回调

2 个答案: