相关疑难解决方法(0)

Angular 2 Animation - 布尔触发器?

我试图触发绑定到布尔属性的转换,但这似乎没有触发.

这是我的动画触发器的缩减版本

trigger(
  'trueFalseAnimation', [
    transition('* => true', [
      style({backgroundColor: '#00f7ad'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ]),
    transition('* => false', [
      style({backgroundColor: '#ff0000'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ])
  ]
)
Run Code Online (Sandbox Code Playgroud)

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div>
Run Code Online (Sandbox Code Playgroud)

去测试:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = true;
        setTimeOut(() => {
            this.model.someProperty = false;
        }, 5000);    
    }, 1000)
}
Run Code Online (Sandbox Code Playgroud)

someProperty更改时,触发器永远不会发生.

作为一个快速测试我更改了触发器以使用字符串,它的工作原理

trigger(
      'trueFalseAnimation', [
        transition('* => Success', [
          style({backgroundColor: '#00f7ad'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ]),
        transition('* => Failed', [
          style({backgroundColor: '#ff0000'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ])
      ]
    )
Run Code Online (Sandbox Code Playgroud)

去测试: …

typescript angular2-animation angular

23
推荐指数
1
解决办法
9314
查看次数

标签 统计

angular ×1

angular2-animation ×1

typescript ×1