jQuery的觸發動畫

我需要觸發每個按鈕動畫點擊不切換按鈕類，因爲我有我的片斷波紋管：jQuery的觸發動畫

我試着用addClass()和removeClass()類似的方法，但它正如所料，在這裏不工作是代碼：

$(document).ready(function() { 
 
    $("button[class*='navbar-toggler']").click(function() { 
 
     $(this).toggleClass("my-animation") 
 
    }); 
 
})

@keyframes my-animation { 
 
\t 16.65% { 
 
\t \t transform: translateY(8px); 
 
\t } 
 

 
\t 33.3% { 
 
\t \t transform: translateY(-6px); 
 
\t } 
 

 
\t 49.95% { 
 
\t \t transform: translateY(4px); 
 
\t } 
 

 
\t 66.6% { 
 
\t \t transform: translateY(-2px); 
 
\t } 
 

 
\t 83.25% { 
 
\t \t transform: translateY(1px); 
 
\t } 
 

 
\t 100% { 
 
\t \t transform: translateY(0); 
 
\t } 
 
} 
 

 
.my-animation { 
 
\t \t animation-name: my-animation; 
 
\t \t animation-duration: 1s; 
 
\t \t animation-timing-function: ease-in-out; 
 
\t \t animation-iteration-count: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation"> 
 
          <i class="fa fa-bars"></i> 
 
         </button>

來源

2017-10-04 SilverSurfer

使用的setTimeout funtion爲刪除我的動畫類，並使用

.navbar-toggler{ 
outline:0!important; 
}

$(document).ready(function() { 
 
    if(!$("button[class*='navbar-toggler']").hasClass('my-animation')){ 
 
    $("button[class*='navbar-toggler']").click(function() { 
 
     $(this).addClass("my-animation"); 
 
     setTimeout(function(){ $("button[class*='navbar-toggler']").removeClass("my-animation"); }, 1000); 
 
    }); 
 
    } 
 
})

@keyframes my-animation { 
 
\t 16.65% { 
 
\t \t transform: translateY(8px); 
 
\t } 
 

 
\t 33.3% { 
 
\t \t transform: translateY(-6px); 
 
\t } 
 

 
\t 49.95% { 
 
\t \t transform: translateY(4px); 
 
\t } 
 

 
\t 66.6% { 
 
\t \t transform: translateY(-2px); 
 
\t } 
 

 
\t 83.25% { 
 
\t \t transform: translateY(1px); 
 
\t } 
 

 
\t 100% { 
 
\t \t transform: translateY(0); 
 
\t } 
 
} 
 

 
.my-animation { 
 
\t \t animation-name: my-animation; 
 
\t \t animation-duration: 1s; 
 
\t \t animation-timing-function: ease-in-out; 
 
\t \t animation-iteration-count: 1; 
 
} 
 

 
.navbar-toggler{ 
 
outline:0!important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation"> 
 
          <i class="fa fa-bars"></i> 
 
         </button>

來源

2017-10-04 10:11:31 Gattbha

爲什麼如果你使用$（本）.removeClass（它不工作），而不是$（「按鈕[*類= 'Navbar的toggler']」）。removeClass （）?? – SilverSurfer

也許$（這個）不工作，因爲setTimeout函數，我不知道.. – Gattbha

還行謝謝 – SilverSurfer

jQuery的觸發動畫

回答

相關問題