角度方向为ngIf的Animejs

Question

我开始使用动画js，我想在我的Angular应用程序中包含一个动画。

在尝试这样做时，我发现当放置动画的< code>div依赖于指令< code>ngIf时，动画不起作用。当ngIf中的条件为真时，图像正确加载，但它没有动画。删除指令解决了这个问题，但我想有条件地展示它。

JS：

var value = 2;

anime({
  targets: '#rod',
  translateX: 70,
  easing: 'linear',
  loop: true
});

CSS:

#rod{
  width: 100px;
  height: 100px;
  background-color: red;
}

HTML工作正常：

<div id="rod">
</div>

超文本标记语言没有动画：

<div id="rod" *ngIf="value > 0">
</div>

HTML也不工作：

<div *ngIf="value > 0">
    <div id="rod">
    </div>
</div>

我应该做些什么来使动画符合Angular指令吗？我使用的是Angular 8.2.14。

Answer 1

使用 *ngIf HTML 不会渲染，因此动画无法使用它。你能尝试使用[隐藏]属性吗？

希望这有所帮助！

非常感谢。