使用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>

和帶有動畫的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內置動畫類。 我創建了具有完整的，隨時可以運行的應用程序的存儲庫，因此您可能需要檢查它。

視頻也出現閃爍，但由於Flash視頻被廢棄，因此僅記錄了一個，而實際上有更多視頻在此處

Answer 1

離子關鍵幀動畫fadeIn和fadeOut使用opacity ng-hide使元素在display: none !important;不可見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 在渲染元素后應用，然后才應用動畫。 垃圾已刪除。

Answer 2

檢查https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode 。 iOS可能在第一幀上設置了錯誤的不透明度值。