Question

我有类似的情况： How to use ng-show and ng-hide with buttons in AngularJS

我有一个播放/暂停按钮。 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>

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

这真的让我感到困扰，有人可以建议一种不同的写作方式吗？

Answer 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>

Answer 2

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

否则你可以用一个替换两个按钮并根据哪个＆＃34;模式＆＃34;切换css类和点击处理程序。它在

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

2 个答案: