触发CSS过渡锚定于JavaScript

Question

我有一个简单的问题，我不知道如何处理它，因为我学习JavaScript

我想要做的就是一个链接导航锚在CSS上淡入/淡出过渡。为此，我必须使用JavaScript获取当前页面ID和锚点href，并触发CSS效果。

这是我走到这一步：

$('.btn').click(function(e) { 
 
    e.preventDefault(); 
 
    var next = $(this).attr('href'); 
 
    $(this).parent().addClass('fadeout', function() { 
 
     setTimeout(function() { 
 
      $(this).parent().css('display', 'none'); 
 
     }, 1000); 
 
    $('#' + next).css('display', 'block'); 
 
    $('#' + next).addClass('fadein'); 
 
    }); 
 
});

.fadeout { 
 
    opacity: 0; 
 
    transition: all 1000ms ease; 
 
} 
 

 
.fadein { 
 
    opacity: 1; 
 
    transition: all 1000ms ease; 
 
} 
 

 
#page2, 
 
#page3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="page1"> 
 
    Page 1 Content 
 
    <br> 
 
    <a href="page2" class="btn">Show Page 2 and hide this page</a> 
 
    <br> 
 
    <a href="page3" class="btn">Show Page 3 and hide this page</a> 
 
</div> 
 

 
<div id="page2"> 
 
    Page 2 Content 
 
    <br> 
 
    <a href="page1" class="btn">Show Page 1 and hide this page</a> 
 
    <br> 
 
    <a href="page3" class="btn">Show Page 3 and hide this page</a> 
 
</div> 
 

 
<div id="page3"> 
 
    Page 3 Content 
 
    <br> 
 
    <a href="page1" class="btn">Show Page 1 and hide this page</a> 
 
    <br> 
 
    <a href="page2" class="btn">Show Page 2 and hide this page</a> 
 
</div>

预先感谢您帮助我学习

Answer 1

有几件事你的代码错误：

• 只有addClass方法期望1个参数，以便第二个参数（函数）永远不会被调用。
• 你的超时回调中的this不是你认为的那样。 this表现得有点奇怪，并且很难掌握，特别是当你刚刚开始使用javascript时。我不会在这里解释它（大量的信息），但在这种情况下，我会将值缓存在超时函数之外的变量中。
• 您正在添加关于淡出的类，但是当您淡入时，您再也不会将其删除。我会确保在您HTML中，所有可见的“页”有一个类fadein，而不可见的类为fadeout。这样你就可以切换两者来切换状态。
• jQuery提供了show()和hide()方法，所以我会使用这些方法而不是自己修改display值。
• jQuery实际上也提供fadeIn和fadeOut方法，这些方法可能更适合这里，但为了您的“练习”，让我们在这里坚持使用css动画。
• 如果您多次使用jQuery选择器，将它放入变量中是明智的做法。这样DOM解析只需要完成一次。随着您的DOM变得越来越复杂，这实际上是相当昂贵的操作。

因此，既然说了，你的JavaScript将是这个样子：

$('.btn').click(function(e) { 
    e.preventDefault(); 
    var $target = $(this); 
    var $next = $('#' + $(this).attr('href')); 
    $target.parent().toggleClass('fadeout fadein'); 
    setTimeout(function() { 
    $target.parent().hide(); 
    $next.show(); 
    $next.toggleClass('fadein fadeout'); 
    }, 1000); 
}); 

看一看在行动代码：https://jsfiddle.net/rr7a7sL4/