使用toggleClass切換使用JQuery的CSS動畫

我想切換下拉菜單，單擊時動畫下拉，然後在另一次單擊時備份。這是動畫，但不支持。它正在消失。使用toggleClass切換使用JQuery的CSS動畫

這裏是我的codepen：

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

來源

2017-02-24 Omar

如果您已經使用jQuery，那麼爲什麼不讓它做，而不是試圖內做動畫CSS？你不必維護所有的代碼。 – Slime

我想用這些CSS動畫代替。 – Omar

改變了你的代碼了一下，看看是否有幫助：

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

更新時間： 如果您想使用的動畫，而不是過渡：

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

來源

2017-02-24 18:08:46 Masoud

我在這裏運行時出現錯誤。你只添加這個CSS？仍然有同樣的問題。 .slidenavdown { \t top：0px; \t} – Omar

@Omar修正了它，忘了添加JQuery – Masoud

很抱歉，做了什麼改變。我不能告訴 – Omar

添加一個「過渡」性質的規則來進行原始類，像這樣：

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

來源

2017-02-24 18:10:08

同樣的問題。我補充說。 – Omar

使用toggleClass切換使用JQuery的CSS動畫

回答

相關問題