スティッキーメニューで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トランジションの場合は、.navbar-fixed-top 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; 
    }