$ ionicLoading.hide凍結所有ionSpinner對視圖

動畫我使用$ ionicLoading同時加載從靜止服務內容和隱藏在然後呼叫承諾的加載進度。這隻在第一次需要數據時完成。然後，我使用拉來刷新（ionRefresher）以刷新數據，但是刷新器中的ionSpinner被凍結（沒有動畫）。我認爲在致電$ ionicLoading.hide（）時會出現錯誤，它凍結了所有ionSpinners。我的平臺是android。下面是僅使用ionSpinner和$ ionicLoading此行爲的小例子：http://codepen.io/oscarmesa/pen/EKyrMr

HTML：

<html ng-app="app"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic Loading</title> 

    <link href="http://code.ionicframework.com/1.2.4/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.2.4/js/ionic.bundle.js"></script> 
</head> 

<body ng-controller="myController"> 
    <ion-pane> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Loading...</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-spinner></ion-spinner> 
    </ion-content> 
    </ion-pane> 
</body> 

</html>

JS：

angular.module('app',['ionic']) 
.config(function() { 
    //Set platform UI to android 
    ionic.Platform.setPlatform('android'); 
}) 
.controller('myController',function($ionicLoading){ 
    $ionicLoading.show(); 
    setTimeout(function(){ 
    $ionicLoading.hide(); 
    },5000); 
});

來源

2016-03-11 oskr

沒有我的答案和codepen例如解決您的問題？ – TaeKwonJoe

這一事實，離子微調動畫搪塞，並表現出這根本就是因爲Ionic團隊的設計監督而導致的粗野行爲。如果使用股票調整器硬件加速3D CSS轉換通過GPU呈現動畫，那麼他們將從不由於單線程JavaScript操作而需要時間來處理數據並重新綁定視圖。對於所有我的應用我覆蓋了$ ionicLoading元素類，像這樣和我包括ionRefresher風格爲您的方案也：

.loading-container .loading { 
    width: 64px; 
    height: 64px; 
    background: url(../images/icon-invert.svg) no-repeat center center; 
    background-color: transparent; 
    background-size: 64px 64px; 
    margin: 100px auto; 
    -webkit-animation: sk-rotateplane 2s infinite ease-in-out; 
    animation: sk-rotateplane 2s infinite ease-in-out; 
    -webkit-backface-visibility: visible; 
    backface-visibility: visible; 
} 
.loading-container .loading .spinner { display: none; } 

.scroll-refresher .icon-refreshing { 
    width: 40px; 
    height: 40px; 
    margin: auto; 
    background-color: #333; 
    border-radius: 7px; 
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 
    animation: sk-rotateplane 1.2s infinite ease-in-out; 
    -webkit-backface-visibility: visible; 
    backface-visibility: visible; 
} 
.icon-refreshing .spinner { display: none; } 

@-webkit-keyframes sk-rotateplane { 
    0% { -webkit-transform: perspective(120px) rotateY(0deg); } 
    50% { -webkit-transform: perspective(120px) rotateY(180deg); } 
    100% { -webkit-transform: perspective(120px) rotateY(360deg); } 
} 
@keyframes sk-rotateplane { 
    0% { -webkit-transform: perspective(120px) rotateY(0deg); transform: perspective(120px) rotateY(0deg); } 
    50% { -webkit-transform: perspective(120px) rotateY(180deg); transform: perspective(120px) rotateY(180deg); } 
    100% { -webkit-transform: perspective(120px) rotateY(360deg); transform: perspective(120px) rotateY(360deg); } 
}

然後確保加載微調代碼執行過程中顯示使用超時：

$ionicLoading.show(); 
$timeout(function() { 
    //execute all the expensive things that would grind the default spinner to a halt! 
}, 200).then($ionicLoading.hide);

看到這個實際行動後，您的產品所有者會問：「您從上一輪交付物以來是如何將整個應用程序從HTML5混合Ionic應用程序移植到某個本地腳本解決方案的？

與實施的解決方案的例子

Codepen叉：http://codepen.io/TaeKwonJoe/pen/jrwwjN

檢查出更多的GPU動畫的靈感這個夢幻般的演示： http://tobiasahlin.com/spinkit

來源

2016-09-28 08:50:15 TaeKwonJoe

$ ionicLoading.hide凍結所有ionSpinner對視圖

回答

相關問題