Angular2动画[@triggerName]在* ngFor中不起作用

Question

Basically I want to be able to apply my animation to a specific box when a condition is fulfilled. In my app this need to happen when the user give an answer for question1 (in Component1) -> through a shared service -> in COmponent2 I get notified about it, and if the answer is correct I will scale the box with id=1(I used id just to point the importance of the specificity of the box)

The [@triggerName] = "my_value_from_expression" value not working added by *ngFor but the value exists;

If I do this: ng.probe($0)._debugInfo._view.changeDetectorRef._view on the box, gives me this (_expr_3 is the looked value):

...

_el_0:div#1.box

_expr_2:"1"

_expr_3:"animate1"

_expr_4:"Box1"

...

So I have this:

frame.component.ts

@Component({
selector: 'app-frame',
templateUrl: './frame.component.html',
styleUrls: ['./frame.component.css'],
animations:[ 
  trigger('boxScale',[
    state('true', style({
        transform: 'scale(1.2)',
      })),
    state('false', style({
    transform: 'scale(1)',
  })), 
  transition('false => true', animate('100ms ease-in')),
    transition('true => false', animate('100ms ease-out')),
  ]),]
})
export class FrameComponent implements OnInit {
  answ:string[];
  boxes: string[] = [];
  animate1:boolean = true;
  animate2:boolean = false;

constructor(private _commService: CommunicateService) { 
  this._commService.answerSource.subscribe((result:string[]) => {
    this.answ = result;
    this.animate(result)
})

  for(let i = 1; i <= 2; i++ ){
    this.boxes.push("animate"+i);
  }
}
animate(result){
 /***** result: ['q_id',corect_answ','user_answ'] *****/
  if(result[1] != undefined && result[1] === result[2]){
      this.animate1 = !this.animate1;
      this.animate2 = !this.animate2;
    }
  }
}

frame.component.html

<div class="boxes">
   <div class="box" [@boxScale]="animate1">Box_1</div>
   <div class="box" [@boxScale]="animate2">Box_2</div>
   <div *ngFor="let box of boxes; let i = index; " class="box" id="{{i+1}}" [@boxScale]="box">Box{{i+1}}</div>
</div>

What I try to do is to add with ngfor the correct value for [@boxScale] so the result should be:

<div class="boxes">
  <div class="box" [@boxScale]="animate1">Box_1</div>
  <div class="box" [@boxScale]="animate2">Box_2</div>
  <div class="box" id="1" [@boxScale]="animate1">Box1</div>
  <div class="box" id="2" [@boxScale]="animate2">Box2</div>
</div>

First two hardcoded elements works just fine with those animate1 and animate2 variables but the other two, generated with *ngFor are not working at all.

What am I doing wrong here?

Answer 1

Try something like this Check the Plunker if code below doesn't make sense.

import { 
    Component, OnChanges, Input, 
    trigger, state, animate, transition, style 
} from '@angular/core';

@Component({
  selector : 'ease-inout',
  animations: [
    trigger('boxScale',[
    state('true', style({
        transform: 'scale(1.2)',
      })),
    state('false', style({
    transform: 'scale(1)',
  })), 
  transition('false => true', animate('100ms ease-in')),
    transition('true => false', animate('100ms ease-out')),
  ])
  ],
  template: `

    <div class="boxes">
      <div class="box" [@boxScale]="animate1">Box_1</div>
      <div class="box" [@boxScale]="animate2">Box_2</div>
    <div *ngFor="let box of boxes; let i = index; " class="box" id="{{i+1}}" [@boxScale]="box">Box{{i+1}}</div>
</div>
  `
})
export class EaseInOutComponent implements OnChanges {
  boxes: boolean[] = [];
  animate1:boolean = true;
  animate2:boolean = false;

  constructor()
  {
    // just for example
    this.boxes.push(this.animate1);
    this.boxes.push(this.animate2);
    console.log(this.boxes) //[true, false]
  }

}

Hope this will help..

Answer 2

@MMK - please check the update

 <div>
    <button (click)="box1()">Toggle Box1</button>
    <button (click)="box2()">Toggle Box2</button>
</div>    
box1(){
  this.animate1 = !this.animate1;
}
box2(){
  this.animate2 = !this.animate2;
}