Animation with CSS / JQuery

Question

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.

It sounds like you're looking for either setTimeOut() or promises. — Obsidian Age
– Obsidian Age, Commented Mar 18, 2018 at 23:36

Dan Kreiger · Accepted Answer · 2018-03-19 00:23:37Z

1

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>

edited Mar 19, 2018 at 0:23

answered Mar 18, 2018 at 23:46

Dan Kreiger

5,5342 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DXXPublic Over a year ago

thanks Dan. Now, i dont know if im over my head but what i wanted also was when the menu is open and i press the button for the resize of the menu to go first and then the background color button to change .. just like a reverse animation

Dan Kreiger Over a year ago

I updated the snippet for this. I'll try to update the explanation, but I believe the snippet is now doing what you'd like.

Dan Kreiger Over a year ago

@DXXPublic I updated the snippet and the explanation

DXXPublic Over a year ago

Awesome that was exactly what i wanted.

Dan Kreiger Over a year ago

Great! I'm glad it helped :)

Collectives™ on Stack Overflow

Animation with CSS / JQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related