toggleClassを使用してJQueryでCSSアニメーションを切り替えます。

Question

ドロップダウンを切り替え、クリックしてアニメートしてからもう一度クリックしてバックアップします。それはアニメートしていますが、バックアップはありません。それはただ消えています。

は、ここに私の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; 
      } 
     } 

あなたのコードビットに変更

Answer 1

、それは場合に役立ちます参照してください： アニメーションの代わりに推移使用したい場合：

$(".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>

を更新しました

$(".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; 
 
} 
 

 

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

 

 
/* --- 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>

を

Answer 2

そうのように、元のクラスのためのルールに「転移」プロパティを追加します：あなたはすでに、なぜそれが中でそれをやろうとするのではなく、アニメーションをやらない、jQueryのを使用している場合

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