淡出CSS中的转换元素

Question

我正在CSS中的导航栏上工作。目前，当用户滚动时，我的徽标（#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