使用IonicFramework在iOS上使用简单动画进行奇怪的闪烁

Question

我熟悉IonicFramework并构建非常简单的应用程序。 现在它有一个按钮显示面板（淡入，正在尝试从底部滑入）。它在Androids上工作正常，但在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>

带有动画的css类我适用于ng-show

.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，因此您可能需要查看它。

同时视频显示闪烁，但由于闪存视频是废话，只有一个录制，而实际上有更多的video here

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

它没有导致这样的高峰：

这是因为{/ 1}}在之后应用呈现元素，然后才会应用动画。垃圾被移除。

Answer 2

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