Question

基本上我希望能够在满足条件时将动画应用到特定的框中。在我的应用程序中，这需要在用户给出question1的答案时（在Component1中） - ＆gt;通过共享服务 - ＆gt;在COmponent2中，我收到通知，如果答案是正确的，我将使用id = 1来缩放框（我使用id只是为了指出框的特殊性的重要性）

由[@triggerName] = "my_value_from_expression"添加的*ngFor值无效，但值存在;

如果我这样做：ng.probe($0)._debugInfo._view.changeDetectorRef._view在框中，给我这个（_expr_3是看起来的值）：

...

_el_0：DIV＃1.box

_expr_2：＆＃34; 1＆＃34;

_expr_3：＆＃34; animate1＆＃34;

_expr_4：＆＃34; BOX1＆＃34;

...

所以我有这个：

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>

我尝试做的是添加ng为[@boxScale]的正确值，所以结果应为：

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

前两个硬编码元素适用于animate1和animate2个变量，但使用*ngFor生成的其他两个元素根本不起作用。

我在这里做错了什么？

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

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

2 个答案: