在粘性菜單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; 
    }