Some cards in the hand won't flip

[georgiee]

There's a bug introduced with the flip animation. It seems that the hand animation that orchestrates the the child animations (on each card) is not recognizing a changed card.

I think it's a problem here.

transition(':enter, :increment', [
       query('@flipAnimation', [
        stagger(100, animateChild())
       ], { optional: true })
])

[georgiee]

It also happens when the animation is disabled. So it's time to blame my obscure ngOnChanges in the flip card where I tried to enforce a flip animation even if the card wasn't destroyed before 🙊

ngOnChanges(changes: SimpleChanges) {
    if (changes.value && !changes.value.firstChange && this.animateFlip) {
      this.flipAnimationSubject.next('back');
      setTimeout(() => {
        this.flipAnimationSubject.next(this.flipState);
      }, 0);
    }

    if (changes.revealed) {
      this.flipAnimationSubject.next(this.flipState);
    }
  }

[georgiee]

Found a hand that is not working and pinned it through an injected game configuration. Here is a branch fix-hand-flip-animate-bug.

[georgiee]

It only happens when you drag the SKip-Bo wildcard into a pile. A pile converts the Skip-Bo card into the logical card value that would follow the current top card of the pile.

Example: If the pile is empty it would be transformed into a 1, is there a 5 a 6 would follow etc.

Together with the CDK Drag & Drop — where the real components are moved into other receiving components we have now a problem whenever we drag a Skip-Bo card into a pile. The card face gets transformed and this somehow breaks the animation flip.

That's a good starting point and a fix should be possible — either with a CDK Drag & Drop setting or by looking into the Flipcard Animation.

My assumption: The card value transformation when we drop it into a pile triggers a card flip which is blocked by the parent animation (HandComponent) but never triggered. Somewhere between the card transformation, the building pile and the hand component animation is the problem.

(If you remove the hand animation trigger there is no visible bug) but also no animation.

[georgiee]

Here the minimal reproduction of the bug: https://skipbo-bug-flip.stackblitz.io/

Source to edit: https://stackblitz.com/edit/skipbo-bug-flip

• Drag & Drop is not the problem
• Neither the transformation of the Skipbo Card
• Not even the changing sorting

I can perfectly recreate the problem, it's like the animation engine wrongly identifies an item being destroyed while it's clearly not. I will tinker around with the minimal demonstration and if I can't get any other insights I will file a bug.

[georgiee]

I filed an issue in the angular tracker — let's see https://github.com/angular/angular/issues/27754