Skip to content

Instantly share code, notes, and snippets.

@bdalziel
Created June 27, 2012 17:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bdalziel/3005596 to your computer and use it in GitHub Desktop.
Save bdalziel/3005596 to your computer and use it in GitHub Desktop.
Rewrite YUI app transitions to use translate3d
stopTransitionsFlickering: function () {
var transDuration = 0.3;
var translateDistance = '100%';
Y.Transition.fx['app:fadeIn'] = {
opacity : 1,
duration: transDuration,
on: {
start: function (data) {
var styles = {opacity: 0},
config = data.config;
if (config.crossView && !config.prepended) {
styles.transform = 'translate3d(-' + translateDistance + ',0,0)';
}
this.setStyles(styles);
},
end: function () {
this.setStyle('transform', 'translate3d(0,0,0)');
}
}
};
Y.Transition.fx['app:fadeOut'] = {
opacity : 0,
duration: transDuration,
on: {
start: function (data) {
var styles = {opacity: 1},
config = data.config;
if (config.crossView && config.prepended) {
styles.transform = 'translate3d(-' + translateDistance + ',0,0)';
}
this.setStyles(styles);
},
end: function () {
this.setStyle('transform', 'translate3d(0,0,0)');
}
}
};
Y.Transition.fx['app:slideLeft'] = {
duration : transDuration,
transform: 'translate3d(-' + translateDistance + ',0,0)',
on: {
start: function () {
this.setStyles({
opacity : 1,
transform: 'translate3d(0,0,0)'
});
},
end: function () {
this.setStyle('transform', 'translate3d(0,0,0)');
}
}
};
Y.Transition.fx['app:slideRight'] = {
duration : transDuration,
transform: 'translate3d(0,0,0)',
on: {
start: function () {
this.setStyles({
opacity : 1,
transform: 'translate3d(-' + translateDistance + ',0,0)'
});
},
end: function () {
this.setStyle('transform', 'translate3d(0,0,0)');
}
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment