使用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内置动画类.我使用完整的,准备好运行的应用程序创建了存储库,因此您可能需要检查它.

此外,视频显示闪烁但闪存视频是垃圾,只有一个录制,而其中有更多的实际视频在这里

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中的渲染图上引起了一个峰值.

根据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应用,然后才应用动画.垃圾被删除了.