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

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

1 个答案: