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

Full page navigation slide in fade in fade out issue

本文关键字：淡出 出问题 淡入 幻灯片 导航      更新时间：2023-09-26

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

A. 问题

我希望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方法，但我似乎无法使其工作。

这是链接到代码笔

如果 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));

        }
    }
}

实现了类似的解决方案，用于使用 jQuery 淡入和淡出slide-navdiv 的不透明度。

当用户单击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时，它会从body中关闭navigation-is-open类，然后是if语句计算为 false 的时间，因为我不再将navigation-is-open类附加到body元素。因此，我现在使用 else 语句将不透明度从 1 动画化为 0 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(){});
    }

链接到更新的笔

相关文章：