ios - 使用 IonicFramework 在 iOS 上的简单动画上奇怪闪烁

Question

我正在熟悉 IonicFramework 并构建非常简单的应用程序。
现在它有一个按钮显示面板(淡入，也在尝试从底部滑入)。它在 Android 上运行良好，但在 iOS 动画上开始时有奇怪的闪烁(在模拟器和设备上)。

基本上我的观点如下:

<ion-content class="has-header" ng-controller="MainCtrl">
    <div class="container">
      <button class="btn btn__big centered primary" ng-click="toggleDetails()">toggle info</button>
    </div>
    <div class="panel panel-animated primary ng-hide" ng-show="detailsVisible">
      Details here
    </div>
  </ion-content>

以及我应用于 ng-show 的带有动画的 css 类

.panel {
  position: absolute;
  width: 100%;
  height: 40%;
  top: 60%;  
  padding: 1em;
}

.panel-animated {
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.panel-animated.ng-hide {
 -webkit-animation: fadeOut 0.5s;
 -moz-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
}

我没有使用任何外部库来制作动画，只是简单的 Ionic 内置动画类。
我创建了 repository with complete, ready to run application所以你可能想检查一下。

还有显示闪烁的视频，但由于 Flash 视频很垃圾，因此只记录了一个，而实际上还有更多 video here

Answer 1

ionic 关键帧动画fadeIn 和fadeOut 使用opacityng-hide 使用 display: none !important; 使元素不可见.添加/删除 ng-hide 类会导致重绘发生。

Ionic 使用 Angular ngAnimate。在您的 style.css 中，您有:

.panel-animated {
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.panel-animated.ng-hide {
  -webkit-animation: fadeOut 0.5s;
  -moz-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
}

我尝试在一个相当不错的 nvidia 图形上运行它，它在 Chrome 中的渲染图上造成了一个峰值。



根据 the docs on ngShow aniations更改样式后

.panel-animated.ng-hide-remove {
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.panel-animated.ng-hide-add {
  -webkit-animation: fadeOut 0.5s;
  -moz-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
}

它不会导致这样的峰值:



这是因为 .ng-hide-add已应用 之后 元素被渲染，然后才应用动画。垃圾已删除。