Angular2 애니메이션 [@triggerName]이 (가) * ngFor에서 작동하지 않습니다.

Question

기본적으로 조건이 충족되면 특정 상자에 애니메이션을 적용 할 수 있기를 원합니다. 내 응용 프로그램에서는 사용자가 question1 (Component1) -> 공유 서비스 -> COmponent2에서 답변을 주었을 때 알림이 표시되고 답변이 올바른 경우 id = 1 인 상자 크기를 조정합니다 (나는 상자의 특이성의 중요성을 지적하기 위해 이드를 사용했다.)

*ngFor으로 값이 작동하지 않지만 그 값은 존재한다; 상자에 ng.probe($0)._debugInfo._view.changeDetectorRef._view, 내게합니다 (보고 값 _expr_3한다)이 제공 : 내가 이렇게하면

을 ...

_el_0 : DIV 번호의 1.box

_expr_2 "1"

_expr_3 "animate1"

_expr_4 "BOX1"

...

그래서 나는이 있습니다

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> 

무엇 나는 수행하려고하는 [@boxScale]에 대한 올바른 값 ngfor에 추가하는 것입니다 그래서 결과는 다음과 같아야합니다

<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> 

먼저 두 개의 하드 요소가 작동하지 않습니다 *ngFor으로 생성 된 animate1 및 animate2 변수 만 다른 두, 함께 잘 작동 조금도.

내가 뭘 잘못하고 있니?

Answer 1

다음과 같은 코드를 시도하십시오.Plunker 아래의 코드가 의미가 없으면 확인하십시오. 이 도움이 될 것입니다

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] 
    } 

} 

희망 ..

Answer 2

@MMK이 - 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; 
}