Take a look at this latest approach, incorporating click events on <a> elements. By effectively preventing the event from activating during the transition period, and successfully resetting the defaultPrevented property of the event while dispatching it from the transitionend event, I was able to address an issue where the event was not redirecting to the link URL even though it was firing due to a subsequent transition on the link.
To resolve this matter, I accessed the target.href property of the event. Feel free to review the code snippet below:
Pure JS:
var links = document.getElementsByTagName("a");
function onTransitionEnd(event) {
window.location.href = event.target.href;
}
for(i=0; i<links.length; i++) {
links[i].addEventListener("click", function(e) {
this.addEventListener("transitionend", function() {
onTransitionEnd(e);
});
if( this.className.search(/animate/) > -1 )
this.className = this.className.replace("animate", "");
else
this.className = this.className + " animate";
e.preventDefault();
});
}
Pure JS Fiddle.
Using jQuery:
function onTransitionEnd(event) {
console.log(event);
window.location.href = event.target.href;
}
$("a", this).on("click", function (e) {
if ( $(this).hasClass("animate") )
$(this).removeClass("animate");
else
$(this).addClass("animate");
$("a").on("transitionend", function () {
onTransitionEnd(e);
});
e.preventDefault();
});
jQuery Fiddle.
With Original Poster's Code (Pure JS):
function onTransitionEnd(event) {
/* do stuff here */
}
{
.....,
views: { ... },
onExit: function(e){
someEle.addEventListener("transitionend", function() {
onTransitionEnd(e);
});
someEle.classList.remove("someClass"); //CSS transition
}
}