CODEWITHSUNDEEP
jquerycssbootstrap-4css-transitions
Elaine Byene
Elaine Byene

Reputation: 4142

Show background-color in transition

I'm trying to show the background-color with a bit of animation but it's appearing suddenly. I want the navbar background-color to appear with some sort of animation.

JSFiddle DEMO: https://jsfiddle.net/3f0czkpt/

$(window).scroll(function() {
  if ($(document).scrollTop() > 100) {
    $('.navbar').addClass('affix');
  } else {
    $('.navbar').removeClass('affix');
  }
});
body {
  padding-top: 50px;
  background-color: #eee;
}

.navbar {
  -webkit-transition: padding 0.2s ease;
  -moz-transition: padding 0.2s ease;
  -o-transition: padding 0.2s ease;
  transition: padding 0.2s ease;
}

.affix {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  background-color: #000;
  -webkit-transition: padding 0.2s linear;
  -moz-transition: padding 0.2s linear;
  -o-transition: padding 0.2s linear;
  transition: padding background-color 0.2s linear;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<section>
  <div class="container-fluid">
    <h1>Here is some content</h1>
    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
      raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic
      lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade
      disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache
      food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
  </div>
</section>
<section>
  <div class="container-fluid">
    <h1>Here is some more content</h1>
    <h1>Here is some content</h1>
    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
      raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic
      lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade
      disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache
      food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
  </div>
</section>

Upvotes: 1

Views: 67

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

The transition rule belongs on the base class, .navbar, not the class you're appending after scroll threshold is reached. Also, separate multiple transition properties using a comma.

body {
  padding-top: 50px;
  background-color: #eee;
}
.navbar { 
  transition: padding, background-color 0.2s linear;  
}
.affix {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  background-color: #000;      
}

Here is a working demo: jsFiddle

Upvotes: 1

Related Questions