Skip to content

Commit

Permalink
fix(view): prevent flicker when changing tabs on android
Browse files Browse the repository at this point in the history
When android changes tabs, there was slight delay between the view
becoming the cached view and the new tab becoming the active view.
Similar to how iOS's tab swap animation works, passing in opacity
prevents the leaving view from dissepearing too early, allowing
for a much smoother animation.
  • Loading branch information
mhartington committed Mar 24, 2016
1 parent e2727d2 commit a7620d2
Showing 1 changed file with 8 additions and 7 deletions.
15 changes: 8 additions & 7 deletions js/angular/service/ionicConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -487,27 +487,28 @@ IonicModule
provider.transitions.views.android = function(enteringEle, leavingEle, direction, shouldAnimate) {
shouldAnimate = shouldAnimate && (direction == 'forward' || direction == 'back');

function setStyles(ele, x) {
function setStyles(ele, x, opacity) {
var css = {};
css[ionic.CSS.TRANSITION_DURATION] = d.shouldAnimate ? '' : 0;
css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
css.opacity = opacity;
ionic.DomUtil.cachedStyles(ele, css);
}

var d = {
run: function(step) {
if (direction == 'forward') {
setStyles(enteringEle, (1 - step) * 99); // starting at 98% prevents a flicker
setStyles(leavingEle, step * -100);
setStyles(enteringEle, (1 - step) * 99, 1); // starting at 98% prevents a flicker
setStyles(leavingEle, step * -100, 1);

} else if (direction == 'back') {
setStyles(enteringEle, (1 - step) * -100);
setStyles(leavingEle, step * 100);
setStyles(enteringEle, (1 - step) * -100, 1);
setStyles(leavingEle, step * 100, 1);

} else {
// swap, enter, exit
setStyles(enteringEle, 0);
setStyles(leavingEle, 0);
setStyles(enteringEle, 0, 1);
setStyles(leavingEle, 0, 0);
}
},
shouldAnimate: shouldAnimate
Expand Down

0 comments on commit a7620d2

Please sign in to comment.