javascript - ng-show 和 ng-hide 在 Ionic 中很慢。两个元素在几毫秒内可见(仅在 iOS 中)

Question

在 Ionic 元素中，我有一个音频播放器。如果音频未播放，用户可以:

1. 用户点击播放按钮
2. 音频开始
3. 隐藏播放按钮并显示暂停按钮

恰恰相反，如果正在播放音频，用户可以:

1. 用户点击暂停按钮
2. 音频已暂停
3. 隐藏暂停按钮并显示播放按钮

问题是在几毫秒内同时显示播放和暂停。仅当我点击暂停按钮(播放音频时)时才会发生这种情况，并且仅在 iOS 中发生，在 Android 中我没有这个问题。

这是错误的样子:

按钮 html 是:

<span ng-click="player.playAudio(audio)" ng-hide="player.isViewAudioPlayingAudio()">
    <img src="img/audio-play-icon.svg" alt="" class="big-icon audio-control">
    <img src="img/audio-play-hover-icon.svg" alt="" class="big-icon audio-control-hover">
</span>

<span ng-click="player.pauseAudio()" ng-show="player.isViewAudioPlayingAudio()">
    <img src="img/audio-pause-icon.svg" alt="" class="big-icon audio-control" >
    <img src="img/audio-pause-hover-icon.svg" alt="" class="big-icon audio-control-hover">
</span>

您可以在这里看到类如何变化(GIF图像，点击打开)

对于悬停按钮，我有几行 CSS。这不是问题，我在没有悬停图像的情况下尝试过，但仍然存在问题，但我向您展示以供澄清。

.audio-control-hover{
    display: none;
}

.activated{
    .audio-control{
        display: none;
    }

    .audio-control-hover{
        display: inline;
    }
}

知道如何提高 ng-show 和 ng-hide 的性能吗？

Answer 1

性能方面的 ng-if 对于某些场景来说更好。这是一篇关于它的好文章。尝试使用 ng-if 来代替，看看它会改进它。

http://www.codelord.net/2015/07/28/angular-performance-ng-show-vs-ng-if/