javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed pulsating PTR icon

Browse Source
This commit is contained in:
Max Lynch
2013-11-12 20:16:33 -06:00
parent 59b0e64309
commit 664fe55ff8
5 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
dist/css/ionic.css vendored
View File

@ -2297,13 +2297,16 @@ body, .ionic-body {
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
bottom: 25px; bottom: 25px;
-webkit-transform: scale(0.2); } -webkit-transform: scale(0.2);
-webkit-transition: -webkit-transform 0.1s linear;
-webkit-animation-play-state: paused;
-webkit-animation: refresher-pulsate 1.5s linear;
-webkit-animation-iteration-count: infinite; }
.scroll-refreshing { .scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out; } -webkit-transition: height 0.1s ease-in-out; }
.scroll-refreshing .ionic-refresher { .scroll-refreshing .ionic-refresher {
-webkit-animation: refresher-pulsate 1.5s linear; -webkit-animation-play-state: running; }
-webkit-animation-iteration-count: infinite; }
@-webkit-keyframes refresher-pulsate { @-webkit-keyframes refresher-pulsate {
0% { 0% {

10
dist/js/ionic-angular.js vendored
View File

@ -557,15 +557,23 @@ angular.module('ionic.ui.content', [])
var icon = $element[0].querySelector('.ionic-refresher'); var icon = $element[0].querySelector('.ionic-refresher');
// Scale up the refreshing icon // Scale up the refreshing icon
var didHold = false;
var onRefreshOpening = ionic.throttle(function(e, amt) { var onRefreshOpening = ionic.throttle(function(e, amt) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((0.2 + amt), 1) + ')'; if(!didHold) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((0.2 + amt), 1) + ')';
}
if(amt >= 1) {
didHold = true;
}
}, 100); }, 100);
$scope.$on('scroll.onRefreshing', function(e) { $scope.$on('scroll.onRefreshing', function(e) {
console.log('ON REFReSHING');
icon.style[ionic.CSS.TRANSFORM] = 'scale(2)'; icon.style[ionic.CSS.TRANSFORM] = 'scale(2)';
}); });
$scope.$on('scroll.onRefresh', function(e) { $scope.$on('scroll.onRefresh', function(e) {
console.log('ON REFReSH');
icon.style[ionic.CSS.TRANSFORM] = 'scale(1)'; icon.style[ionic.CSS.TRANSFORM] = 'scale(1)';
}); });
$scope.$on('scroll.onRefreshOpening', onRefreshOpening); $scope.$on('scroll.onRefreshOpening', onRefreshOpening);

10
js/ext/angular/src/directive/ionicContent.js vendored
View File

@ -83,15 +83,23 @@ angular.module('ionic.ui.content', [])
var icon = $element[0].querySelector('.ionic-refresher'); var icon = $element[0].querySelector('.ionic-refresher');
// Scale up the refreshing icon // Scale up the refreshing icon
var didHold = false;
var onRefreshOpening = ionic.throttle(function(e, amt) { var onRefreshOpening = ionic.throttle(function(e, amt) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((0.2 + amt), 1) + ')'; if(!didHold) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((0.2 + amt), 1) + ')';
}
if(amt >= 1) {
didHold = true;
}
}, 100); }, 100);
$scope.$on('scroll.onRefreshing', function(e) { $scope.$on('scroll.onRefreshing', function(e) {
console.log('ON REFReSHING');
icon.style[ionic.CSS.TRANSFORM] = 'scale(2)'; icon.style[ionic.CSS.TRANSFORM] = 'scale(2)';
}); });
$scope.$on('scroll.onRefresh', function(e) { $scope.$on('scroll.onRefresh', function(e) {
console.log('ON REFReSH');
icon.style[ionic.CSS.TRANSFORM] = 'scale(1)'; icon.style[ionic.CSS.TRANSFORM] = 'scale(1)';
}); });
$scope.$on('scroll.onRefreshOpening', onRefreshOpening); $scope.$on('scroll.onRefreshOpening', onRefreshOpening);

2
js/ext/angular/test/list.html
View File

@ -119,7 +119,7 @@
}; };
$scope.items = []; $scope.items = [];
for(var i = 0; i < 5; i++) { for(var i = 0; i < 20; i++) {
$scope.items.push({ $scope.items.push({
text: 'Item ' + i, text: 'Item ' + i,
canDelete: true, canDelete: true,

8
scss/_scaffolding.scss
View File

@ -139,13 +139,17 @@ body, .ionic-body {
margin-left: -5px; margin-left: -5px;
bottom: 25px; bottom: 25px;
-webkit-transform: scale(0.2); -webkit-transform: scale(0.2);
-webkit-transition: -webkit-transform 0.1s linear;
-webkit-animation-play-state: paused;
-webkit-animation: refresher-pulsate 1.5s linear;
-webkit-animation-iteration-count: infinite;
} }
.scroll-refreshing { .scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out; -webkit-transition: height 0.1s ease-in-out;
.ionic-refresher { .ionic-refresher {
-webkit-animation: refresher-pulsate 1.5s linear; -webkit-animation-play-state: running;
-webkit-animation-iteration-count: infinite;
} }
} }