使用 IonicFramework 在 iOS 上的简单动画上奇怪闪烁答案

【问题标题】：Weird flickering on simple animation on iOS with IonicFramework使用 IonicFramework 在 iOS 上的简单动画上奇怪闪烁
【发布时间】：2014-10-30 01:46:41
【问题描述】：

我正在熟悉 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

【问题讨论】：

标签： ios angularjs css-animations ionic-framework

【解决方案1】：

离子关键帧动画fadeIn和fadeOut使用opacity ng-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 是在在元素渲染之后应用的，然后才应用动画。垃圾已删除。

【讨论】：

像魅力一样工作！非常感谢。

【解决方案2】：

检查https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode。可能是 iOS 在第一帧设置了错误的不透明度值。

【讨论】：