1

基本上，我希望能够在满足条件时将动画应用到特定的框。在我的应用程序中，当用户给出问题 1 的答案（在 Component1 中）-> 通过共享服务 -> 在 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：“1”

_expr_3:"animate1"

_expr_4:"Box1"

...

所以我有这个：

框架组件.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>

我尝试做的是使用 ngfor 添加正确的值，[@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根本不工作。

我在这里做错了什么？

4

2 回答 2

0

@MMK - 请检查更新

 <div>
    <button (click)="box1()">Toggle Box1</button>
    <button (click)="box2()">Toggle Box2</button>
</div>    
box1(){
  this.animate1 = !this.animate1;
}
box2(){
  this.animate2 = !this.animate2;
}
于 2017-02-07T07:51:05.057 回答
0

如果下面的代码没有意义，请尝试这样 的检查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]
  }

}

希望这会有所帮助..
输出

于 2017-02-06T17:06:40.367 回答