Skip to content

Instantly share code, notes, and snippets.

@benwells
Last active August 29, 2015 13:56
Show Gist options
  • Save benwells/9177293 to your computer and use it in GitHub Desktop.
Save benwells/9177293 to your computer and use it in GitHub Desktop.
Applying a css "fade out" transition animation upon clicking a link before traveling to the next page.
/* fadeOut animation css */
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.4s;
-webkit-animation-duration: 0.4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeOut {
0% {
transform: scale(1);
opacity: 1.0;
}
100% {
transform: scale(0);
opacity: 0.0;
}
}
@-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
opacity: 0.0;
}
}
$('#navPills').find('a').click(function (e) {
var t = this,
//store the href for the clicked element
href = t.href;
//prevent the default behavior
e.preventDefault();
//apply the fade out transition class to the parent ul element
$(t).parent().parent().addClass('fadeOut');
//setTimeout to wait for fade out animation to complete before changing pages
setTimeout(function (){
window.location = href;
}, 200); //the length of time should vary depending on the length of the animation.
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment