Question

我在使用 $ ionicLoading 加载来自其他服务的内容并隐藏然后承诺的加载进度时。这仅在第一次需要数据时完成。然后我使用pull刷新（ ionRefresher ）刷新数据，但刷新中的ionSpinner被冻结（没有动画）。我认为在调用 $ ionicLoading.hide（） 时冻结视图中的所有ionSpinner会出现问题。我的平台是 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);
});

Answer 1

这种离子旋转器动画停滞并表现出这种笨拙行为的事实是因为Ionic团队的设计疏忽。如果股票旋转器使用硬件加速3D CSS转换来通过GPU渲染动画，那么由于单线程JavaScript操作需要时间来处理数据并重新绑定，因此它们将从不停止视图。对于我的所有应用程序，我覆盖了$ ionicLoading元素类，我也为你的场景添加了ionRefresher样式：

['text', 'text2', 'moreText']

然后确保在代码执行期间显示加载微调器使用超时：

.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); }
}

在看到这个实际操作后，您的产品所有者会问：“自上一轮可交付成果以来，您是如何找到将整个应用程序从HTML5混合离子应用程序移植到某些本机脚本解决方案的时间的？”

使用已实施的解决方案的示例的Codepen fork：http://codepen.io/TaeKwonJoe/pen/jrwwjN

查看这个梦幻般的演示，获得更多GPU动画灵感： http://tobiasahlin.com/spinkit

$ ionicLoading.hide在视图中冻结所有ionSpinner的动画

1 个答案: