带有角度指令ngIf

Question

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

在尝试这样做时，我发现当放置动画的div取决于指令ngIf时，动画不起作用。当ngIf中的条件为true时，图像会正确加载，但不会进行动画处理。删除指令可以解决问题，但我想有条件地显示它。

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>

HTML没有动画：

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

HTML也不起作用：

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

我应该做些什么来使动画与Angular指令一起工作吗？ 我正在使用Angular 8.2.14。

Answer 1

使用* ng如果未渲染HTML，则动画无法正常运行。您可以尝试使用 [隐藏] 属性吗？

希望这会有所帮助！

谢谢。