使用toggleClass使用JQuery切换CSS动画

时间：2017-02-24 18:01:48

标签： jquery css3

我想切换一个下拉列表，在点击时设置动画，然后在另一次点击时备份。这是动画效果，但没有备份。它正在消失。

这是我的代码：

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;
          }
        }

2 个答案:

答案 0 :(得分：2)

稍微更改了您的代码，看看是否有帮助：

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

});
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

<强>更新 如果您想使用动画而不是过渡：

＆＃13;
＆＃13; 
$(".openNav").click(function() {
  $('.navdropdown').show();
  $('.navdropdown').toggleClass("slidenavdown");
});
＆＃13; 
.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%;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将“transition”属性添加到原始类的规则中，如下所示：

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