Angular 2动画-布尔触发器? [英] Angular 2 Animation - boolean trigger?

问题描述

我正在尝试触发绑定到布尔属性的过渡，但这似乎没有触发.

I'm trying to trigger a transition bound to a boolean property, but this doesn't seem to fire.

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

Here is a cut down version of my animation trigger

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更改时，触发器永远不会发生.

The trigger never happens when the someProperty changes.

作为一项快速测试，我将触发器更改为使用字符串，它可以正常工作

As a quick test I changed the trigger to use a string and it works

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. 是否支持将布尔值用作触发器?
2. 如果是#1，我是什么人 做错了吗?

1. Are boolean supported as triggers?
2. If yes to #1 what am I doing wrong?

推荐答案

1. 似乎不是.我看到一个问题( 12337 )已经提出 为此，但是到目前为止还没有更新.
2. 另一种替代方法是使用1和0代替true和false.

1. It seems not. I saw that an an issue (12337) has already been raised for this, but there has been no update so far.
2. One other alternative is to use 1 and 0 instead of true and false.

请参阅 plunker . 16/angular-2-animation-important-concepts.html>此处.

See the plunker from 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'))
])

这篇关于Angular 2动画-布尔触发器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！