iOS上带有IonicFramework的简单动画出现奇怪的闪烁

我越来越熟悉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>

我没有使用任何外部库来制作动画，只是使用普通的Ionic内置动画类。 我创建的，所以你可能想检查它

---

同样，视频显示闪烁，但由于flash视频是垃圾，所以只录制了一个视频，而实际上还有更多的视频。可能iOS在第一帧上设置了错误的不透明度值。

请检查。可能是iOS在第一帧上设置了错误的不透明度值。

爱奥尼亚关键帧动画fadeIn和fadeOut使用

不透明度

ng hide使用
display:none使元素不可见！重要的。添加/删除ng hide类会导致重新绘制

离子型使用角型氨基甲酸酯。在您的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中的渲染图上出现了一个峰值


根据更改样式后

它不会导致这样的峰值：


这是因为
.ng hide add
在渲染元素后应用，然后才应用动画。垃圾已删除。
爱奥尼亚关键帧动画淡入淡出使用
不透明度
ng hide使用
display:none使元素不可见！重要的。添加/删除ng hide类会导致重新绘制

离子型使用角型氨基甲酸酯。在您的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中的渲染图上出现了一个峰值


根据更改样式后

它不会导致这样的峰值：


这是因为
.ng hide add
在渲染元素后应用，然后才应用动画。垃圾被清除。
效果很好！非常感谢。非常有魅力！谢谢。
.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;
}