在粘性菜单css过渡不起作用

Question

我在粘性菜单的动画有问题。 CSS被改变了，但没有转换。任何人都有一个想法，为什么？

$(window).scroll(function() { 
    if ($(this).scrollTop() > 50) { 
     $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky"); 
    } else { 
     $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky"); 
    } 
}); 

和CSS：

.navbar-fixed-top { 
    transition: 0.3 all ease; 
    -webkit-transition: 0.3 all ease; 
} 
.navbar-fixed-top.navbar-fixed-top-sticky { 
    background: #601a36; 
    height: 80px; 
    transition: 0.3 all ease-in-out; 
    -webkit-transition: 0.3 all ease-in-out; 
} 

Answer 1

你有没有转换发生的原因是因为你没有为它定义过渡到初始属性。尝试这个。

.navbar-fixed-top { 
    transition: 0.3s all ease; 
    -webkit-transition: 0.3s all ease; 

    background-color: transparent; 
    height: 0; 
} 

.navbar-fixed-top.navbar-fixed-top-sticky { 
    background-color: #601a36; 
    height: 80px; 
} 

希望工程！

Answer 2

您需要在您的计时后添加unit。 0.3无效，它必须是0.3s或300ms之类的东西。 background-color可以工作，但是对于height转换，您还需要在您的css类中添加一个默认值。

$(window).scroll(function() { 
 
    if($(this).scrollTop() > 50) { 
 
     $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky"); 
 
    } else { 
 
     $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky"); 
 
    } 
 
});

/* --- just for demo --- */ 
 
.navbar-fixed-top { 
 
    position: fixed; 
 
    width: 100%; 
 
    line-height: 20px; 
 
    background: #ccc; 
 
} 
 
.navbar-fixed-top-sticky { 
 
    line-height: 80px; 
 
} 
 
.content { 
 
    height: 1000px; 
 
} 
 
/* --- just for demo --- */ 
 

 
.navbar-fixed-top { 
 
    height: 20px;        /* default height */ 
 
    transition: 0.3s all ease;    /* added unit */ 
 
    -moz-transition: 0.3s all ease;   /* added unit */ 
 
    -webkit-transition: 0.3s all ease;  /* added unit */ 
 
} 
 
.navbar-fixed-top-sticky { 
 
    background: #601a36; 
 
    height: 80px; 
 
    transition: 0.3s all ease-in-out;   /* added unit */ 
 
    -moz-transition: 0.3s all ease-in-out; /* added unit */ 
 
    -webkit-transition: 0.3s all ease-in-out; /* added unit */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="navbar-fixed-top">.navbar-fixed-top</div> 
 
<div class="content"></div>

Answer 3

这应该整理出来。保持CSS，只排除transition部分。

$(window).scroll(function() { 
      if ($(this).scrollTop() > 50) { 
       $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky").fadeIn('slow'); 
      } else { 
     $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky").fadeOut('slow'); 

    } 
     }); 

，或者你可以尝试添加时间单位，你应该给你的transitions：

.navbar-fixed-top { 
     transition: 0.3s all ease; 
     -webkit-transition: 0.3s all ease; 
    } 

    .navbar-fixed-top.navbar-fixed-top-sticky { 
     background: #601a36; 
     height: 80px; 
     transition: 0.3s all ease-in-out; 
     -webkit-transition: 0.3s all ease-in-out; 
    }