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

Question

当我将 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 -->

Answer 1

使用 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');
  });
});

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

How do I let javascript animation finish before href is running

html

javascript

jquery

href

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

How do I let javascript animation finish before href is running

html

javascript

jquery

href

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