javascript - 全页导航幻灯片淡入淡出问题

Question

当用户点击 <a href="#slide-nav" class="slide-nav-trigger"> 时，整页导航滑入 View 。我使用 CSS 触发动画，使用 jQuery 进行事件委托(delegate)。

问题

我想要 slide-nav当用户切换 navigation-is-on 时淡入和淡出，而不是仅仅让它闪烁。类到 body .通过为 slide-nav 的不透明度设置动画，我已经能够实现淡入淡出效果(只需单击一次。)

$(function(){
// assign click event to slide-nav-trigger
$('.slide-nav-trigger').on('click',function(event){
    event.preventDefault(); // cancel the default action

    // when user clicks slide-nav-trigger toggleClass navigation-is-open to body
    $('body').toggleClass('navigation-is-open');

    var slideNav = $('.slide-nav');
    slideNav.animate({
        opacity:1 }, 2000, function(){});
    });
});

如您所见，我的目标是 slide-nav并为它的不透明度设置动画，这样我就能得到效果。这种方法是我似乎能够达到我所追求的效果的唯一方法。我尝试使用 fadeIn方法，但我似乎无法让它发挥作用。

这是链接 the codepen

Answer 1

如果 body 有类，您将需要另一个函数在“点击”时运行。你可以只用 css 来完成它，因为你已经触发了类:

http://codepen.io/anon/pen/KdRaye

.slide-nav{
    position: fixed;
    z-index: 1;
    top:0;
    left:0;
    height:100%;
    width:100%;
    opacity: 0;
    display: block;
    background-color:#51585A;
        transition: opacity 2s ease-in-out;
    .navigation-is-open & {
        opacity: 1;
    }
    .slide-navigation-wrapper{
        // main navigation content here
        height:100%;
        overflow-y: auto;
        overflow-scrolling:touch;
        // padds links over to the left
        padding:40px 5% 40px calc(5% + 80px);
        // Force Hard W acceleration webkit
        @include transition(translateZ(0));
        backface-visibility:hidden;
        // transform links on X axis -50% hidden off screen!
        @include transform(translateX(-50%));
        // transition the transformation
        @include transition(transform $animation-dur);
        // transition timing function makes the animation smooth
        @include transition-timing-function(cubic-bezier(.86,.01,.77,.78));
    }
    // adding navigation-is-open class and assigning our parent selector `slide-nav`

    // when slide-nav-trigger button is clicked on I toggle navigation-is-on to body of html

    .navigation-is-open & {
        visibility: visible;
        // transition visibility

        // slide-navigation-wrapper slides out when navigation-is-on is toggled to body
        .slide-navigation-wrapper{
            // transition translate on the X axis `0`
            @include transform(translateX(0));


        }
    }
}