动画完成后执行重定向

Question

我有以下用于执行自定义动画的JavaScript。

$(function() {
  $('.box .animated.hex-animation').click(function(event){
    event.preventDefault();
    var href= $(this).attr('href');
    $('.box .animated.hex-animation').removeClass('hex-animation').queue(function(){
      $(this).addClass('hex-animation-exit').dequeue();
    }); 
  });
});

我有一个工作样本here。

我希望在动画完成后将浏览器重定向到锚标签中的url。

是否有人能够告知如何实现这一目标？

Answer 1

您需要处理CSS3转换结束事件

$('.box .animated.hex-animation').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {

    window.location.href = "Your new url";

  });

Answer 2

我需要的确切CSS3事件是webkitAnimationEnd oanimationend msAnimationEnd animationend。感谢kiranvj指出我正确的方向。以下代码产生了我需要的结果。

$(function() {
  $('.box .animated.hex-animation').click(function(event){
    event.preventDefault();
    var href = $(this).attr('href');
    $('.box:last .animated.hex-animation:last').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {
      window.location.href = href;
    });
    $('.box .animated.hex-animation').removeClass('hex-animation').queue(function(){
      $(this).addClass('hex-animation-exit').dequeue();
    });
  });
});