如何让javascript动画在href运行之前完成

How do I let javascript animation finish before href is running

本文关键字：运行 href javascript 动画      更新时间：2023-11-19

当我在项目中将href设置为网站时，javascript动画在进入网站之前不会完成。但如果我设置href="#0"，它会起作用。

有人说X.preventDefault会起作用，但事实并非如此。

感谢我能得到的任何帮助：）。

Javascript：

jQuery(document).ready(function($){
//toggle 3d navigation
$('.cd-3d-nav-trigger').on('click', function(){
    toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
});
//select a new item from the 3d navigation
$('.cd-3d-nav a').on('click', function(){
    var selected = $(this);
    selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
    updateSelectedNav('close');
});
$(window).on('resize', function(){
    window.requestAnimationFrame(updateSelectedNav);
});
function toggle3dBlock(addOrRemove) {
    if(typeof(addOrRemove)==='undefined') addOrRemove = true;   
    $('.cd-header').toggleClass('nav-is-visible', addOrRemove);
    $('main').toggleClass('nav-is-visible', addOrRemove);
    $('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
}
//this function update the .cd-marker position
function updateSelectedNav(type) {
    var selectedItem = $('.cd-selected').preventDefault(),
        selectedItemPosition = selectedItem.index() + 1, 
        leftPosition = selectedItem.offset().left,
        backgroundColor = selectedItem.data('color');

    $('.cd-marker').removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
        'left': leftPosition,
    });
    if( type == 'close') {
        $('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
            toggle3dBlock(false);
        });
    }
}
$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

})；

HTML:

<header class="cd-header">
    <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>
    <a href="#0" class="cd-3d-nav-trigger">
        Menu
        <span></span>
    </a>
</header> <!-- .cd-header -->

<nav class="cd-3d-nav-container">
    <ul class="cd-3d-nav">
        <li class="cd-selected">
            <a href="Default.aspx">Home</a>
        </li>
        <li>
            <a href="aboutme.aspx>About me</a>
        </li>
        <li>
            <a href="Portfolio.aspx" onclick="">Portfolio</a>
        </li>
        <li>
            <a href="Vouge approved.aspx">Vouge approved</a>
        </li>
        <li>
            <a href="Contact information.aspx">Contact information</a>
        </li>
    </ul> <!-- .cd-3d-nav -->
    <span class="cd-marker color-1"></span> 
</nav> <!-- .cd-3d-nav-container -->

使用preventDefault可以停止导航，但动画完成后必须使用代码进行导航。

向updateSelectedNav添加一个回调，以便在动画完成时使用它来执行某些操作：

function updateSelectedNav(type, callback) {

在转换结束的事件中调用它：

  if( type == 'close') {
    $('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      toggle3dBlock(false);
      if (typeof callback == 'function') callback();
    });
  }

现在，您可以使用preventDefault停止导航，并在动画完成时执行此操作：

$('.cd-3d-nav a').on('click', function(e){
  e.preventDefault();
  var selected = $(this);
  selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
  updateSelectedNav('close', function(){
    window.location.href = selected.attr('href');
  });
});
相关文章：