javascript - 淡入淡出CSS中的过渡元素

Question

我正在使用 CSS 制作导航栏。当前，当用户滚动时，我的 Logo (#cos_logo) 会立即消失。如果它只是通过 CSS 过渡慢慢消失，我更愿意。

谁能解释一下我是如何使用现有代码实现这一目标的？

http://jsfiddle.net/78a2ro1r/

$(window).scroll(function(){
    $('#header_nav').toggleClass('scrolled', $(document).scrollTop() > 0);
});

#header_nav {
  background: #1588cb;
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}

body {
    height:1000px
}

nav {
    height:100px
}

nav ul {
    position: absolute;
    bottom: 0;
    margin: 0px;
    right: 0px;
    transition: 0.3s;
}

#header_nav{
    height:100px;
    transition: height .600s ease;
}

#header_nav.scrolled{
    height:78px;
}

#header_nav.scrolled ul#menu-primary-menu{
    bottom:45%;
}

#cos_logo {
    padding: 25px 0 0 0;
    float: right;
}

#header_nav.scrolled #cos_logo {
    display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="header_nav">

<a id="cos_logo" href="#" title=""><img src="https://placeholdit.imgix.net/~text?txtsize=8&txt=171%C3%9730&w=171&h=30" alt="" width="171" height="30" class="no-scale" /></a>

<nav class="primary menu">

    <div class="menu-primary-menu-container">
        
        <ul id="menu-primary-menu" class="menu">
            <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a></li>
        </ul>
        
    </div>
    
</nav>
    
</div>

Answer 1

您不能像在 JavaScript 中那样在 CSS 中为显示切换设置动画。只需在此处使用 opacity 即可:

#cos_logo {
    transition: opacity .5s;
}

#header_nav.scrolled #cos_logo {
    opacity: 0;
}

演示: JSFiddle

作为替代方案，您可以使用 jQuery:

$(window).scroll(function() {
    $('#cos_logo').fadeOut(500);
});

演示:JSFiddle