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

Posted 2023-03-06

【中文标题】在angularjs中删除动画中间的元素

【英文标题】：Remove an element that is in the middle of an animation in angularjs

【发布时间】：2021-04-20 17:05:31

【问题描述】：

我有一个实例，其中我有 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%);
  

【问题讨论】：

你可以绑定状态而不是使用它来隐藏元素吗？即<div class="phrase">status | uppercase</div>

这可能是一个更好的选择。我稍后会在这里查看。

【参考方案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 原则，即您永远从控制器修改 DOM。

我知道这是非常反模式的。直到我找到另一个解决方案，这就是我得到的。