Angular 使用绑定的阵列角度2跟踪动画

我想使用数组来跟踪更改（为每个div一步一步地制作动画）

当我硬编码6div时，动画效果很好

 <div [innerHTML]="broadcastInnerHtml[0]" style="background-color:azure; width: 23%; display: none; border-radius: 10px; padding: 5px;"
     [style.background-color]="colorBackground[0]"
     [@visibilityChanged]="visibility[0]">
    <p>Can you see me? 111111.</p>
</div>

<div [innerHTML]="broadcastInnerHtml[1]" style="background-color:azure; width: 23%; display: none; border-radius: 10px; padding: 5px;"
     [style.background-color]="colorBackground[1]"
     [@visibilityChanged]="visibility[1]">
    <p>Can you see me? 111111.</p>
</div>

<div [innerHTML]="broadcastInnerHtml[2]" style="background-color:azure; width: 23%; display: none; border-radius: 10px; padding: 5px;"
     [style.background-color]="colorBackground[2]"
     [@visibilityChanged]="visibility[2]">
    <p>Can you see me? 111111.</p>
</div>

<div [innerHTML]="broadcastInnerHtml[3]" style="background-color:azure; width: 23%; display: none; border-radius: 10px; padding: 5px;"
     [style.background-color]="colorBackground[3]"
     [@visibilityChanged]="visibility[3]">
    <p>Can you see me? 111111.</p>
</div>

<div [innerHTML]="broadcastInnerHtml[4]" style="background-color:azure; width: 23%; display: none; border-radius: 10px; padding: 5px;"
     [style.background-color]="colorBackground[4]"
     [@visibilityChanged]="visibility[4]">
    <p>Can you see me? 111111.</p>
</div>

<div [innerHTML]="broadcastInnerHtml[5]" style="background-color:azure; width: 23%; display: none; border-radius: 10px; padding: 5px;"
     [style.background-color]="colorBackground[5]"
     [@visibilityChanged]="visibility[5]">
    <p>Can you see me? 111111.</p>
</div>

你能看见我吗？111111

你能看见我吗？111111

你能看见我吗？111111

你能看见我吗？111111

你能看见我吗？111111

你能看见我吗？111111

但这不是一个好办法。我想使用Ngfor生成div。所以我改为

<div *ngFor="let visi of visibility; let idx=index"
    style="background-color:azure; width: 23%; display: none; border-radius: 10px; padding: 5px;" 
    [@visibilityChanged]="visi" 
    [innerHTML]="broadcastInnerHtml[idx]" 
    [style.background-color]="colorBackground[idx]">

        <p>Can you see me? 111111.</p>
</div>

你能看见我吗？111111

更改后，该状态将工作，但不会显示动画。 我已经花了好几个小时，但仍然没有解决办法。

---

请帮忙。非常感谢

当您使用

visibility[idx]

而不是

visi

时会发生什么？你怎么猜到这里的问题是由

[@visibilityChanged]='visi'

引起的？我也尝试了visibility[idx]，但同样，它不起作用。抱歉猜猜，我只是怀疑这就是原因。为了不让大家感到困惑，我已经把它删除了。你用的是angular 2的哪个版本？我用的是2.1.0版本