javascript - Animejs 与 Angular Directive(指令) 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 未渲染，则动画无法使用它。您可以尝试使用[隐藏]属性吗？

希望这有帮助!

谢谢。