Angular 2 Animation - 布尔触发器？答案

【问题标题】：Angular 2 Animation - boolean trigger?Angular 2 Animation - 布尔触发器？
【发布时间】：2017-03-13 11:04:55
【问题描述】：

我正在尝试触发绑定到布尔属性的转换，但这似乎没有触发。

这是我的动画触发器的精简版

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 是，我是什么做错了吗？

【问题讨论】：

标签： angular typescript angular2-animation

【解决方案1】：

我也有同样的问题。不确定是否支持布尔值作为触发器，但我发现的解决方法是定义一个带有 getter 的字符串属性，以将布尔值作为字符串返回。像这样的：

get somePropertyStr():string {
    return this.someProperty.toString();
}

那么你应该将你的动画绑定到 somePropertyStr 属性。

再一次，这是一个丑陋的解决方法，最好的办法是能够使用布尔值。

【讨论】：

这似乎是一个很好的解决方法，但我希望 Angular 2 团队能做出一些回应。谢谢

【解决方案2】：

似乎没有。我看到已经提出了一个问题 (12337) 为此，但到目前为止还没有更新。
另一种选择是使用 1 和 0 代替真假。

参见here 中的plunker。

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'))
])

【讨论】：

对于那些在 2017 年看到这个答案的人：从 Angular 4.0.1 开始，您将需要使用 state('1', ... 和 state('0', ...) 而不是 state('true', ...) 和 state('false', ...)
state('0',...) 我花了好几个小时才让这该死的东西工作起来。感谢您的提示！
我在州名中使用连字符时遇到了同样的问题。将州名称更改为 camelCase 解决了我的问题。
我很幸运地偶然发现了this pull request，所以我节省了几个小时撞墙的时间。
2019 年的问候！这已得到修复。 boolean-value-matching

【解决方案3】：

状态被定义为一个字符串，所以我们需要坚持下去。

基于您的代码的最简单但最棘手的方法是这样的

<div [@trueFalseAnimation]="model.someProperty?.toString()">Content here</div>

但这很糟糕，所以这可能更好

<div [@trueFalseAnimation]="model.someProperty ? 'active' : 'inactive'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'visible' : 'hidden'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'up' : 'down'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'left' : 'right'">Content here</div>

这里最好的建议是使用与其真正含义相对应的状态。在这种情况下，真假到底意味着什么？

我考虑过制作一个管道来转换布尔值，但这样做的唯一好处是确保您与状态字符串保持一致。

【讨论】：