Как задержать гиперссылку до окончания анимации CSS?

Question

Я пытаюсь перенаправить якорный тег, как только закончится анимация CSS. Я попытался захватить href в jQuery и использовать «setTimeout», чтобы вызвать задержку перед тем, как перейти в место привязки (это то, что было рекомендовано в предыдущих потоках), но оно не работает.

$(document).ready(function() { 
 

 
    $('.section').click(function() { 
 

 
    var goTo = this.getAttribute("href"); //HOLDS HREF 
 

 
    var $elementA = $('.section').bind('webkitAnimationEnd', function() //ANIMATION BEGIN 
 
     { 
 
     $(this).removeClass('clicked'); 
 
     }); 
 

 
    var $elementB = $('.section').bind('animationend', function() { 
 
     $(this).removeClass('clicked'); 
 
    }); 
 

 
    $('.section').click(function() { 
 
     $(this).addClass('clicked'); //ANMATION END 
 
    }); 
 

 
    setTimeout(function() { //SUPPOSED TO DELAY LINK 
 
     window.location = goTo; 
 
    }, 300); 
 
    }); 
 
});

a { 
 
    overflow: hidden; 
 
} 
 

 
.section { 
 
    background-color: teal; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4); 
 
} 
 

 
.response { 
 
    position: relative; 
 
    top: 75px; 
 
    left: 80px; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 500px; 
 
    background-color: #f5f5f5; 
 
    transition: .05s ease-out; 
 
    opacity: 0; 
 
} 
 

 
.clicked { 
 
    animation: event 1.4s; 
 
} 
 

 
.clicked > .response { 
 
    animation: response 1.6s; 
 
} 
 

 
@keyframes event { 
 
    0% { 
 
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4); 
 
    } 
 
    20% { 
 
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6); 
 
    } 
 
    100% { 
 
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4); 
 
    } 
 
} 
 

 
@keyframes response { 
 
    0% {} 
 
    16% { 
 
    opacity: .7; 
 
    } 
 
    32% { 
 
    opacity: 0; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    transform: scale(10); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="section"> 
 
    <div class="response"></div> 
 
</a>

Answer 1

Проблема в том, что запрос отправляется немедленно загрузить новую страницу, следовательно, текущий пользовательский интерфейс выгружается сразу с несколькими дальнейших обновлений. Чтобы обойти эту проблему вы можете остановить поведение по умолчанию ссылки с помощью preventDefault(), а затем сделать запрос на следующей странице вручную после завершения анимации, как это:

$(document).ready(function() { 
 
    $('.section').click(function(e) { 
 
    e.preventDefault(); 
 
    var $a = $(this).addClass('clicked'); 
 
    setTimeout(function() { 
 
     window.location.assign($a.attr('href')); 
 
    }, 300); 
 
    }); 
 
});

a { 
 
    overflow: hidden; 
 
} 
 
.section { 
 
    background-color: teal; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4); 
 
} 
 
.response { 
 
    position: relative; 
 
    top: 75px; 
 
    left: 80px; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 500px; 
 
    background-color: #f5f5f5; 
 
    transition: .05s ease-out; 
 
    opacity: 0; 
 
} 
 
.clicked { 
 
    animation: event 1.4s; 
 
} 
 
.clicked > .response { 
 
    animation: response 1.6s; 
 
} 
 
@keyframes event { 
 
    0% { 
 
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4); 
 
    } 
 
    20% { 
 
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6); 
 
    } 
 
    100% { 
 
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4); 
 
    } 
 
} 
 
@keyframes response { 
 
    0% {} 16% { 
 
    opacity: .7; 
 
    } 
 
    32% { 
 
    opacity: 0; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    transform: scale(10); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="http://example.com" class="section"> 
 
    <div class="response"></div> 
 
</a>