Question

页面向下滚动时会显示一个标题。我正在尝试添加css过渡以使其淡入淡出，因为我已经读过使用javascript进行淡入淡出效果不高。

.header-wrapper {
    top:0;
    left:0;
    right:0;
    position: fixed;
    display:none;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}
.header-wrapper.active {
     display:block;   
}
.header {
    background-color:#000;
    height:80px;
}

Here is the js fiddle

$(window).scroll(function () {
    var y = $(window).scrollTop();

    // if above 300 and doesn't have active class yet
    if (y > 300 && !$('.header-wrapper').hasClass('active')) {
        $('.header-wrapper').addClass('active');

    // if below 300 has still has active class
    } else if(y <= 300 && $('.header-wrapper').hasClass('active')) {
        $('.header-wrapper').removeClass('active');
    }
    });

Answer 1

使用css3属性transition添加转换。

混淆的一个常见原因：您只能转换接受数值的属性。因此，您无法在display: block和display: none之间进行转换。

但是可以在opacity: 0和opacity: 1之间转换：

transition: 0.5s opacity

这看起来像这样：

.bottomMenu {
    ...
    opacity: 0;
    transition: 0.5s opacity;
    ...
}
.bottomMenu.active {
     opacity: 1;   
}

对于您的具体情况，我建议您在0和60px之间转换高度。

为此您可以使用：

transition: 0.5s height

所以：

.bottomMenu {
    ...
    height: 0;
    transition: 0.5s height;
    ...
}
.bottomMenu.active {
     height: 80px;   
}

Answer 2

要为不透明度设置动画，元素必须可见。因此，请移除display:none并使其完全透明（opacity:0）。然后，当类名更改时，您可以使用CSS transitions为opacity设置动画：

.bottomMenu {
    ...
    display:block;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.bottomMenu.active {
     opacity:1   
}

http://jsfiddle.net/oL9ro4gL/6/

此外，您不仅限于为不透明度设置动画：

.bottomMenu {
    ...
   transition: all .25s ease-in-out;
}
.bottomMenu.active {
    opacity:1;
    height: 60px;
    background-color: blue;
    transform:rotate(180deg);
    color:white;
    font-size:40px;
    etc...
}

http://jsfiddle.net/oL9ro4gL/8/

Answer 3

很遗憾，您无法为display属性设置动画。有关解决方法，请参阅this question及其suggestions。

如何在标题中添加cs过渡到js滚动？

3 个答案: