在 angularjs 中删除动画中间的元素

Question

我有一个实例，根据模型，我有 3 种可能的滚动动画。我正在使用 ng-if 来处理与模型条件不匹配的元素的删除。当模型改变时，我的问题就出现了。匹配条件的元素开始它的滚动动画，但前一个元素似乎被留在后面，直到动画完成。检查元素确实表明分别应用了 ng-leave 和 ng-enter。

如何让不符合ng-if条件的旧动画立即隐藏？

查看

<div class='phrase' ng-if='status === "live"'>
    LIVE
</div>
<div class='phrase' ng-if='status === "pending"'>
    PENDING
</div>
<div class='phrase' ng-if='status === "finished"'>
    FINISHED
</div>

SCSS

.phrase {
text-align: center;
color: rgba(255,255,255, 0.7);
font-weight: bold;
position: absolute;
white-space: nowrap;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 12vw;
animation: slide 10s linear infinite;
animation-direction: reverse;

@keyframes slide {
  0% {
    transform:translate(-270%, -50%);
  }
  100% {
    transform:translate(50%, -50%);
  }
}

Answer 1

好吧，当我完成它时，我采用了撕掉创可贴的方法并手动从 DOM 中删除了元素。

如果您找到解决 ng-animate 崩溃的方法，我很想听听其他答案。

// 在视图中

<div class='phrase' id='live' ng-if='status === "live"'>
    LIVE
</div>
<div class='phrase' id='pending' ng-if='status === "pending"'>
    PENDING
</div>
<div class='phrase' id='finished' ng-if='status === "finished"'>
    FINISHED
</div>

// 在控制器中

// watched for condition, then remove element with id
if($scope.status === "live"){
    angular.element(document.querySelector("#pending")).remove();
}

--- 编辑 ---

我采纳了 @Mark Clark 的建议并采用了更简单的方法。在视图中绑定一次状态是可行的方法。在我的例子中，这很有效，但我仍然可以看到在哪些地方尝试克服 ng-animate 覆盖 ng-if 可能是其他人的问题。这肯定是个例外。

最佳答案

<div class='phrase'>
    {{status}}
</div>

在 angularjs 中删除动画中间的元素

Remove an element that is in the middle of an animation in angularjs

css

angularjs

sass

ng-animate