Toggle CSS animation with JQuery using toggleClass

Question

I want to toggle a dropdown, animate down on click and then back up on another click. It's animating down but not back up. It's just disappearing.

Here's my codepen:

http://codepen.io/omarel/pen/YZPyOg

JQUERY

$(".openNav").click(function() {
    $('.navdropdown').toggleClass("slidenavdown");
});

HTML

<a href="javascript:;" class="openNav">open</a>

<div class="navdropdown">
          <div class="holdcenter">
            <ul>
              <li><a href="#buildingcontainer">hello</a></li>

            </ul>
          </div>
        </div>

CSS

.openNav {
  position:fixed;
  top:0px;
  left:0px;
  z-index:1000
}

.navdropdown  {
        position: fixed;
        top:-100%;
        width:100%;
        height:100vh;
        background-color: #000;
        z-index:5;
    }
    .navdropdown .holdcenter {
        position: relative;
        display: flex;
    justify-content: center;
    align-items: center;
        height: 100%; 
        overflow-y: auto;
    }
    .navdropdown ul > li {
        display: block;
        position: relative;
        text-align: center;
        font-size:38px;
        letter-spacing: 9.5px;
        margin:27px auto;
    }
    .navdropdown.on  {
        height:100vh;
    }

        .slidenavdown {
          -webkit-animation: slidenavdown; 
          -moz-animation: slidenavdown; 
          -o-animation: slidenavdown; 
          animation:slidenavdown;
        }
        .slidenavdown {
            animation-iteration-count: 1;
          -webkit-animation-iteration-count: 1;
          animation-fill-mode: both;
          -webkit-animation-fill-mode: both;
        }
        .x  {
          -webkit-animation-direction: alternate-reverse;
        animation-direction: alternate-reverse; 
        }


    /* --- DELAYS --- */

        .x {
          -webkit-animation-delay: .2s; 
        animation-delay:  .2s;
        }

    /* --- SPEED --- */

        .slidenavdown {
                -webkit-animation-duration: 0.8s; 
            animation-duration: 0.8s;
            }


    /* --- EASING --- */

        .slidenavdown  { 
        -webkit-animation-timing-function: cubic-bezier(.86,.03,.53,1.01);
        animation-timing-function: cubic-bezier(.86,.03,.53,1.01);
        }

    /* --- TRANSITIONS --- */

        .x {
            -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition: .5s;
        }

    /* --- KEYFRAMES --- */

        @keyframes slidenavdown {
          0% {
            top:-100%;
          }
          100% {
            top:0px;
          }
        }

If you're already using jQuery, then why not let it do the animation instead of trying to do it within the CSS? You wouldn't have to maintain all that code. — Waxi
– Waxi, Commented Feb 24, 2017 at 18:06

Masoud · Accepted Answer · 2017-02-24 18:51:20Z

2

Changed your code a bit, See if it helps:

$(".openNav").click(function() {
  $('.navdropdown').toggleClass("slidenavdown");

});

.openNav {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000
}

.navdropdown {
  position: fixed;
  top: -100%;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index: 5;
  transition: top 2s;
}

.navdropdown .holdcenter {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow-y: auto;
}

.navdropdown ul>li {
  display: block;
  position: relative;
  text-align: center;
  font-size: 38px;
  letter-spacing: 9.5px;
  margin: 27px auto;
}

.navdropdown.on {
  height: 100vh;
}

.slidenavdown {
  top: 0px;
}


/*
		.slidenavdown {
		  -webkit-animation: slidenavdown; 
		  -moz-animation: slidenavdown; 
		  -o-animation: slidenavdown; 
		  animation:slidenavdown;
		}
		.slidenavdown {
			animation-iteration-count: 1;
		  -webkit-animation-iteration-count: 1;
		  animation-fill-mode: both;
		  -webkit-animation-fill-mode: both;
		}
		.x  {
		  -webkit-animation-direction: alternate-reverse;
  		animation-direction: alternate-reverse; 
		}
*/


/* --- DELAYS --- */

.x {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}


/* --- SPEED --- */

.slidenavdown {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}


/* --- EASING --- */

.slidenavdown {
  -webkit-animation-timing-function: cubic-bezier(.86, .03, .53, 1.01);
  animation-timing-function: cubic-bezier(.86, .03, .53, 1.01);
}


/* --- TRANSITIONS --- */

.x {
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}


/* --- KEYFRAMES --- */

@keyframes slidenavdown {
  0% {
    top: -100%;
  }
  100% {
    top: 0px;
  }
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<a href="javascript:;" class="openNav">open</a>
<div class="navdropdown">
  <div class="holdcenter">
    <ul>
      <li><a href="#buildingcontainer">hello</a></li>
    </ul>
  </div>
</div>

Updated: If you want to use animation instead of transition:

$(".openNav").click(function() {
  $('.navdropdown').show();
  $('.navdropdown').toggleClass("slidenavdown");
});

.openNav {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000
}

.navdropdown {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index: 5;
  -webkit-animation: slidenavup;
          animation: slidenavup;

  
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  /* --- SPEED --- */
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  /* --- EASING --- */
  -webkit-animation-timing-function: cubic-bezier(.86, .03, .53, 1.01);
  animation-timing-function: cubic-bezier(.86, .03, .53, 1.01);
  top: -100%;
}

.navdropdown .holdcenter {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  overflow-y: auto;
}

.navdropdown ul > li {
  display: block;
  position: relative;
  text-align: center;
  font-size: 38px;
  letter-spacing: 9.5px;
  margin: 27px auto;
}

.navdropdown.on {
  height: 100vh;
}

.slidenavdown {
  -webkit-animation: slidenavdown;
  animation: slidenavdown;
}
.slidenavdown {
  top: 0px;
}

/* --- DELAYS --- */

.x {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}
/* --- SPEED --- */

.slidenavdown {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}

/* --- TRANSITIONS --- */

.x {
  -webkit-transition: .5s;
  transition: .5s;
}


/* --- KEYFRAMES --- */

@-webkit-keyframes slidenavdown {
  0% {
    top: -100%;
  }
  100% {
    top: 0px;
  }
}

@keyframes slidenavdown {
  0% {
    top: -100%;
  }
  100% {
    top: 0px;
  }
}

@-webkit-keyframes slidenavup {
  0% {
    top: 0px;
  }
  100% {
    top: -100%;
  }
}

@keyframes slidenavup {
  0% {
    top: 0px;
  }
  100% {
    top: -100%;
  }
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<a href="javascript:;" class="openNav">open</a>

<div class="navdropdown" style="display: none;">
  <div class="holdcenter">
    <ul>
      <li><a href="#buildingcontainer">hello</a></li>

    </ul>
  </div>
</div>

edited Feb 24, 2017 at 18:51

answered Feb 24, 2017 at 18:08

Masoud

3331 silver badge11 bronze badges

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

9 Comments

Omar Over a year ago

I'm getting an error when I run it here. Did you only add this CSS? Still getting the same problem. .slidenavdown { top:0px; }

Masoud Over a year ago

@Omar Fixed it, forgot to add JQuery

Omar Over a year ago

Im sorry what's the change that was done. I can't tell

Masoud Over a year ago

@Omar Instead of animation I used transition

Omar Over a year ago

I see. Is there no way to do it similar while using the animation instead.

|

Aleksandar Misich · Accepted Answer · 2017-02-24 18:10:08Z

0

Add a 'transition' property to the rule for the original class, like so:

.navdropdown  {
        position: fixed;
        top:-100%;
        width:100%;
        height:100vh;
        background-color: #000;
        z-index:5;
/* Transition: */
        transition: .8s;
    }

answered Feb 24, 2017 at 18:10

Aleksandar Misich

5022 silver badges15 bronze badges

1 Comment

Omar Over a year ago

same problem. I've added that.

Collectives™ on Stack Overflow

Toggle CSS animation with JQuery using toggleClass

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related