如何延迟超链接直到CSS动画结束？

一旦CSS动画结束，我正试图让锚标签重定向。 我尝试在jQuery中捕获href并使用’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; } } 

Answer 1

问题是因为请求被发送以立即加载新页面，因此当前UI被立即卸载，几乎没有进一步的更新。 要解决此问题，您可以使用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; } }