Question

我正在尝试制作一个动画，然后使用 window.location.href 转到另一页，但是我做不到！

在该动画完成之前，它会与其他页面运行链接。

CSS：

#main {
    position: absolute;
    top: 0;
    left: 415;
    transition: 0.5s;
}

HTML

<button type="button" class="btn btn-secondary" onclick="backInit()">Back</button>
<div id="main">...</div>

我尝试了两种方法：

$(document).ready( function() {
    document.getElementById('main').style.left = 0;
} );

// Way 1
function backInit() {
    setTimeout(run(), 2000);
    setTimeout(returnInit(),2000);
}

// Way 2
function backInit() {
    run().then( function() { window.location.href = baseURL + '/init.html'; } );
}

function run() {
    document.getElementById('main').style.left = 415;
}

对此我需要帮助！

谢谢！

Answer 1

您可以尝试以下操作。

function run() {
  console.log("Executing immediately(do your animation here)");
  setTimeout(returnInit, 2000);
}

function returnInit() {
  console.log("Executing after 2 seconds (do your navigation here)");
}

<button onclick="run()">Start</button>

编辑：

您不应像以下那样致电setTimeout。

 setTimeout(run(), 2000);
 setTimeout(returnInit(),2000);

否则它将立即执行该功能，您应按如下所示对其进行更改。

 setTimeout(run, 2000);
 setTimeout(returnInit,2000);

Answer 2

不幸的是，js不会监听CSS转换时间。相反，您可以在jquery中使用.animate()并使用其回调函数来重定向

这就是使用jquery可以做到的方式

$(document).ready( function() {
    $('#main').css('left' , 0);
});

function run() {
    $('#main').animate({'left' : 415} , 500 , function(){
       window.location.href = 'https://www.google.com';
    });
}

#main {
    position: absolute;
    top: 0;
    background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-secondary" onclick="run()">Back</button>
<div id="main">...</div>

Answer 3

您没有添加动画，所以请尝试以下操作：

$(document).ready( function() {
    document.getElementById('main').style.left = 0;
} );

// Way 1
function backInit() {
    setTimeout(run(), 2000);
    setTimeout(returnInit(),10000);
}


function run() {
  var elem = document.getElementById("main");   
  var pos = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (pos == 415) {
      clearInterval(id);
    } else {
      pos++; 

      elem.style.left = pos + 'px'; 
    }
  }
}
function returnInit() {

  window.location.href ='https://stackoverflow.com/'; 
}

#main {
    position: absolute;
    top: 0;
    left: 415;
  
  animation-duration: 4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<button type="button" class="btn btn-secondary" onclick="backInit()">Back</button>
<div id="main">...</div>

如何在运行window.location.href之前执行一个动画

3 个答案: