ng-show 和 ng-hide 在 Ionic 中很慢。两个元素可见几毫秒（仅在 iOS 中）

Posted 2023-03-14

【中文标题】ng-show 和 ng-hide 在 Ionic 中很慢。两个元素可见几毫秒（仅在 iOS 中）

【英文标题】：ng-show and ng-hide are slow in Ionic. Two elements visible for few ms (only in iOS)

【发布时间】：2016-02-04 13:04:42

【问题描述】：

在 Ionic 项目中，我有一个音频播放器。如果没有播放音频，用户可以：

用户点击播放按钮 音频开始 播放按钮被隐藏，暂停按钮显示

反之，如果正在播放音频，用户可以：

用户点击暂停按钮 音频已暂停 暂停按钮被隐藏，播放按钮被显示

问题是播放和暂停都会显示几毫秒。只有当我点击暂停按钮（正在播放音频时）时才会发生这种情况，并且只有在 ios 中才会发生，在 android 中我没有这个问题。

这是错误的样子：

按钮 html 是：

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

<span ng-click="player.pauseAudio()" ng-show="player.isViewAudioPlayingAudio()">
    <img src="img/audio-pause-icon.svg"  class="big-icon audio-control" >
    <img src="img/audio-pause-hover-icon.svg"  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 的性能吗？

【参考方案1】：

性能明智的 ng-if 在某些情况下更好。这是一篇关于它的好文章。改用 ng-if 试试，看看会不会有所改善。

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

【参考方案2】：

Ionic 正在使用 Angular js 动画库来应用从一种状态到另一种状态的某些转换。它在 iOS 上效果不佳。尝试将以下代码添加到您的 css 以抑制动画：

.ng-hide,
.ng-animate,
.ng-hide-animate,
.ng-hide-remove 
    display: none !important;


.ng-animate.no-animate 
    -webkit-transition: 0s none;
            transition: 0s none;
     -webkit-animation: 0s none;
             animation: 0s none;

希望对你有帮助:)