如何在 JS 中延迟按钮操作直到转换结束

Question

I have a button With a Hover Animation. This button redirects to another page. Whenever I click on the Button. The redirect action Happens immediately Before the transition Even Starts. How can I delay the action until the transition ends? Iam Using

window.location.href = ""

To do The Redirect Action

Answer 1

probably the simplest would be to just delay the redirection in time, and adjust delay time to how long your animation takes:

setTimeout(function(){ window.location.href = ""; }, 3000);

Answer 2

I am assuming that you are using CSS transition and you can wait for the animateend callback documented here .

Perhaps there is an easy way to do this, calculate/figure out how much time is taking to complete the transition and wait that time with a timeout .

You may try something line this:

function btnClicked() {
    setTimeout(
        function() {
            window.location.href = "";
        }, 
        500  // suppose, your transition take 500ms to complete
    );
}