Angular 2 Animation - bool 触发器？

Question

我试图触发绑定(bind)到 bool 属性的转换，但这似乎没有触发。

这是我的动画触发器的简化版本

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

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div>

测试:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = true;
        setTimeOut(() => {
            this.model.someProperty = false;
        }, 5000);    
    }, 1000)
}

当 someProperty 改变时触发永远不会发生。

作为快速测试，我将触发器更改为使用字符串并且它有效

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

测试:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = "Success";
        setTimeOut(() => {
            this.model.someProperty = "Failed";
        }, 5000);    
    }, 1000)
}

第二个例子很好用

我的问题是

1. 是否支持 bool 值作为触发器？
2. 如果对#1 是，我是什么 做错了吗？

Answer 1

1. 好像没有。我看到一个问题 ( 12337 ) 已经被提出 为此，但到目前为止还没有更新。
2. 另一种选择是使用 1 和 0 而不是 true 和 false。

参见 plunker来自 here .

trigger('isVisibleChanged', [
      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
])