AngularJS在使用ng-show ng-hide时，我仍然看到这两个对象1ms

AngularJS I still see the two objects for 1ms while using ng-show ng-hide

本文关键字：1ms 对象 两个 ng-show ng-hide AngularJS      更新时间：2023-09-26

我有类似的情况：如何在 AngularJS 中使用 ng-show 和 ng-hide 与按钮

我有一个播放/暂停按钮的地方。ng-show/hide工作，我唯一的问题是我仍然看到两个对象1ms

我像这样将它们一个

接一个地放置：

<span ng-show="status() != 1">
   <span class="fa fa-play" ng-click="play()"></span>
</span>
<span ng-hide="status() != 1">
   <span class="fa fa-pause" ng-click="pause()"></span>
</span>
在

这两个按钮（上一个/下一个）之前和之后还有另一个对象，当我在播放/暂停时快速单击时 - 有时我在切换它们显示/隐藏时看不到这两个对象（开关很快），但有时我确实看到暂停/播放按钮 1 毫秒，然后其中一个消失了。

这真的很困扰我，有人可以建议不同的写法吗？

如果你遇到 DOM 元素的闪烁问题，那么尽量减少 DOM 发生的变化。您只需使用 1 个跨度即可获得相同的结果，并对其进行较小的更改。

<span class="fa" ng-class="{'fa-pause':status() == 1,'fa-play':status() != 1}" ng-click="status() == 1 ? pause() : play()"></span>

DOM 中的更改通常源自父作用域，并沿树向下传播到所有子作用域。因此，在您的示例中，第一个<span>被消化，然后是下一个同级。因此，在短时间内，一个<span>被消化，而下一个兄弟姐妹仍在等待消化。

您可以通过使用 CSS 来控制可见性来简化 HTML 和 JS 代码。

.CSS

.playing .fa-play { display: none; }
.playing .fa-pause { display: inline; }
.stopped .fa-play { display: inline; }
.stopped .fa-pause { display: none; }

.HTML

<span ng-class="{playing:state()==1,stopped:state()!=1}">
      <span class="fa fa-play" ng-click="play()"></span>
      <span class="fa fa-pause" ng-click="pause()"></span>
</span>

尝试对两个按钮使用 ng-show，但将其中一个按钮的条件切换到 status（） == 1

否则，您可以将两个按钮替换为一个按钮，并根据它所处的"模式"切换 CSS 类和单击处理程序

相关文章：