Question

当用户点击<a href="#slide-nav" class="slide-nav-trigger">我正在使用CSS触发动画和jQuery进行事件委派时，整页导航会滑入视图。

问题

我希望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

你需要另一个功能才能运行＆＃34;点击＆＃34;如果身体有课。你可以用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));


        }
    }
}

Answer 2

使用jQuery实现了一个类似的解决方案，用于淡化和淡出slide-nav div的不透明度。

当用户点击slide-nav-trigger时，navigation-is-open类切换到body元素，if语句中的第一个评估结果为true，然后slide-nav在// if body hasClass of navigation-is-open toggled on if ($('body').hasClass('navigation-is-open')){ // animate opacity on slide-nav from 0 to 1 slideNav.animate({ opacity:1 }, 2000, function(){}); // if navigation-is-open is toggled off }

上执行淡入淡出动画

slide-nav-trigger

当用户第二次点击navigation-is-open时，它会从body切换if的班级，然后false语句评估为navigation-is-open到body，因为我不再有else个slide-nav类附加到if ($('body').hasClass('navigation-is-open')){ // animate opacity on slide-nav from 0 to 1 slideNav.animate({ opacity:1 }, 2000, function(){}); // if navigation-is-open is toggled off } else { // animate opacity from 1 to 0 slideNav.animate({ opacity:0 },1000, function(){}); }元素了。所以我现在使用headers语句在POST上将不透明度从1设置为0

Content-type

链接到更新的Pen

整页导航幻灯片淡入淡出问题

问题

2 个答案: