Question

我有一个简单的CSS类，它可以在<tr>元素上切换不透明度，并且具有基本的简易过渡：

 tbody tr {
   transition: opacity 1s ease;
 }

 tbody.blur tr {
   opacity: .3;
 }

 tbody.blur tr.focus {
   opacity: 1;
 }

[ngClass]设置并删除.blur和.focus类。（关键是模糊除一个聚焦行之外的所有行。）不透明度按预期工作，但转换不起作用。如果我使用开发工具将类直接键入tbody和tr标记，则不透明度会转换，但如果类由ngClass设置，那么就没有转换。< / p>

我尝试设置encapsulation: ViewEncapsulation.None，但这没有任何影响。

我错过了有过渡和ngClass的内容吗？

编辑：ngClass代码基本上是

<tbody [ngClass]="{blur: focused > -1}">
  <tr [ngClass]="{focus: focused === item.id}" *ngFor="let item of items">

组件类有一个聚焦变量，在模糊时设置为-1，在焦点上设置为相应的id。

编辑 - 解决方案

连续返回新Array实例的计算getter会阻止CSS转换;例如here。如果返回相同的数组实例，则为transition occurs。 getter应返回类实例的相同的可变属性，如this。请注意，后一个示例中的属性由其他getter组成，这很好。

Answer 1

像

这样的吸气鬼

  get tableData() {
    return [
        {id: 1, name: 'One', data: this.one},
        {id: 2, name: 'Two', data: this.two},
        {id: 3, name: 'Three', data: this.three},
        {id: 4, name: 'Four', data: this.four},
        {id: 5, name: 'Five', data: this.five},
        {id: 6, name: 'Six', data: this.six}
    ];
  }

每次调用tableData时，

都会返回一个新的数组实例。每次更改检测运行时，Angular都会调用getter并检测更改，因为它会获得不同的实例。这会导致严重的性能问题并中断动画，因为如果不断重新创建项目，动画就不起作用。

更好的方法是

class MyComponent {  
  data = [
    {id: 1, name: 'One', data: this.one},
    {id: 2, name: 'Two', data: this.two},
    {id: 3, name: 'Three', data: this.three},
    {id: 4, name: 'Four', data: this.four},
    {id: 5, name: 'Five', data: this.five},
    {id: 6, name: 'Six', data: this.six}
  ];

  get tableData() {
    return this.data;
  }
}

这种方式角度变化检测每次调用tableData时都会获得相同的实例，并且Angular会很高兴。如果某个事件导致内容或整个数组发生变化，当然这很好，但它不应该因为Angular随后检查两次而改变。

CSS转换为Angular 2+ ngClass

1 个答案: