javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(refresher): get rid of flickers except on droid-4.4

Browse Source 
Fixes #1014.
This commit is contained in:
Andy Joslin
2014-04-03 11:28:25 -06:00
parent feffc99b6a
commit ad67184800
2 changed files with 28 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
js/ext/angular/test/list-fit.html
View File

@@ -11,54 +11,16 @@
</head>
<body>
<ion-header-bar class="bar-positive" ng-class="{'bar-subheader': $root.isSub}">
<h1 class="title">Header!</h1>
</ion-header-bar>
<ion-content scroll="true" ng-controller="ContentCtrl" padding="false">
<pre>
$hasHeader: {{!!$hasHeader}}
$hasSubheader: {{!!$hasSubheader}}
</pre>
<ion-content ng-controller="ContentCtrl" padding="false">
<ion-refresher on-refresh="onRefresh()" pulling-text="pull!" refreshing-text="refreshing!"></ion-refresher>
<ion-checkbox ng-model="$root.isSub">isSub</ion-checkbox>
<ul class="list">
<li class="item">This ion-list should *exactly* fit</li>
<li class="item">between header and footer (no gap),</li>
<li class="item">even with pull-to-refresh.</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
<li class="item">11</li>
<li class="item">12</li>
<li class="item">13</li>
<li class="item">14</li>
<li class="item">15</li>
<li class="item">16</li>
<li class="item">17</li>
<li class="item">18</li>
<li class="item">19</li>
<li class="item">20</li>
<li class="item">21</li>
<li class="item">22</li>
<li class="item">23</li>
<li class="item">24</li>
<li class="item">25</li>
<li class="item">26</li>
<li ng-repeat="i in more">more {{$index}}</li>
</ul>
<ion-infinite-scroll on-infinite="addMore()"></ion-infinite-scroll>
<p>...</p><br/><br/><br/>
<p>...</p><br/><br/><br/>
<p>...</p><br/><br/><br/>
<p>...</p><br/><br/><br/>
<p>...</p><br/><br/><br/>
<p>...</p><br/><br/><br/>
</ion-content>
<ion-footer-bar class="bar-assertive">

39
scss/_scaffolding.scss
View File

@@ -139,23 +139,23 @@ body.grade-c {
}
@keyframes refresh-spin {
0% { transform: rotate(0); }
100% { transform: rotate(-180deg); }
0% { transform: translate3d(0,0,0) rotate(0); }
100% { transform: translate3d(0,0,0) rotate(-180deg); }
}
@-webkit-keyframes refresh-spin {
0% {-webkit-transform: rotate(0); }
100% {-webkit-transform: rotate(-180deg); }
0% {-webkit-transform: translate3d(0,0,0) rotate(0); }
100% {-webkit-transform: translate3d(0,0,0) rotate(-180deg); }
}
@keyframes refresh-spin-back {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0); }
0% { transform: translate3d(0,0,0) rotate(-180deg); }
100% { transform: translate3d(0,0,0) rotate(0); }
}
@-webkit-keyframes refresh-spin-back {
0% {-webkit-transform: rotate(-180deg); }
100% {-webkit-transform: rotate(0); }
0% {-webkit-transform: translate3d(0,0,0) rotate(-180deg); }
100% {-webkit-transform: translate3d(0,0,0) rotate(0); }
}
// Scroll refresher (for pull to refresh)
@@ -185,11 +185,21 @@ body.grade-c {
}
}
.icon-refreshing,
.icon-pulling {
width: 100%;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.icon-pulling {
-webkit-transform: translate3d(0,0,0) rotate(0deg);
transform: translate3d(0,0,0) rotate(0deg);
@include animation-name(refresh-spin-back);
@include animation-duration(200ms);
@include animation-timing-function(linear);
@include animation-fill-mode(both);
@include animation-fill-mode(none);
}
.icon-refreshing,
.text-refreshing {
@@ -200,18 +210,11 @@ body.grade-c {
}
&.active {
.icon-pulling,
.text-pulling {
display: block;
}
.icon-pulling {
@include animation-name(refresh-spin);
-webkit-transform: translate3d(0,0,0) rotate(-180deg);
transform: translate3d(0,0,0) rotate(-180deg);
}
.icon-refreshing,
.text-refreshing {
display: none;
}
&.refreshing {
.icon-pulling,
.text-pulling {