CODEWITHSUNDEEP
jqueryhtmlcss
DXXPublic
DXXPublic

Reputation: 19

Animation with CSS / JQuery

I'm trying to build a simple navbar but I'm having some issues with the way the animation looks and I was wondering if you could give me a hand

I have a Codepen of the issue here: https://codepen.io/anon/pen/oqYwgP

HTML

<nav>
  <div class="menu-icon">
    menu button
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
    </ul>
  </div>
</nav>

CSS

nav ul {
      list-style: none;
      overflow: hidden;
      color: #fff;
      padding-right: 40px; 
      text-align:center;
      height:0px;
      width:60px;
      background:gray;  
  transition: 1s all;
}

.menu-icon {
  width:140px;
  border:1px solid gray;
}
.change-menu-icon{
  background:gray;
  transition: all 1s;
}

.change-menu{
  height: 180px;
}

JS

$(document).ready(function() {
   $(".menu-icon").on("click", function() {
    $("nav ul").toggleClass("change-menu");
    $(".menu-icon").toggleClass("change-menu-icon");
     }); 
  });

I would like to when I press the menu button for the background color to change and then for the menu to resize, and when I toggle the button again for animation to be reverse, for the resize to happen first and then the menu button background color change.

Upvotes: 0

Views: 47

Answers (1)

Dan Kreiger
Dan Kreiger

Reputation: 5516

You are almost there. You can add a transition-delay css property to your nav ul css block. You can add this in the transition shorthand property as well.

I suppose if you want the entire transition to last 1 second, you could set the transition-duration property of your menu icon to 500ms with a transition-delay of 500ms like so:

.menu-icon {
  width: 140px;
  border: 1px solid gray;
  transition: 500ms background 500ms;
}

This transition delay will delay the background color transition 500ms when the .menu-icon class does not have a toggled class.

Note: I'm using the shorthand transition here to combine the transition-property and the transition-duration.

Then simply add a transition css property to your nav ul block that includes a 500ms transition duration.

transition: 500ms height;

This will allow your nav ul to transition without a delay when it doesn't have a toggled class. Therefore, without the toggled classes, your nav will transition first, then your icon.

On the toggled classes, you can specify the delay the other way around i.e. don't add a delay to your icon, but add a delay to your menu:

.change-menu-icon {
  background: gray;
  transition: 500ms background;
}

.change-menu {
  height: 180px;
  transition: 500ms height 500ms;
}

This way, when you add the toggled classes, your icon will not have a delay, but your menu will.

Note:

  • For performance reasons (and since you are only transitioning single css properties), I specified the transition-property on each transition css property instead of using all.

Try the snippet below. I hope it helps.

$(document).ready(function() {
  $(".menu-icon").on("click", function() {
    $("nav ul").toggleClass("change-menu");
    $(".menu-icon").toggleClass("change-menu-icon");
  });
});
nav ul {
  list-style: none;
  overflow: hidden;
  color: #fff;
  padding-right: 40px;
  text-align: center;
  height: 0px;
  width: 60px;
  background: gray;
  transition: 500ms height;
}

.menu-icon {
  width: 140px;
  border: 1px solid gray;
  transition: 500ms background 500ms;
}

.change-menu-icon {
  background: gray;
  transition: 500ms background;
}

.change-menu {
  height: 180px;
  transition: 500ms height 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="menu-icon">
    menu button
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions