###実現したいこと
CSSアニメーションが終わったのを見計らって、アニメーションのためのクラスを削除したいです。
###発生している問題
問題の概要としては、アニメーションする要素が一度隠れた後に現れると、アニメーションが再び実行されてしまう点です。
問題の再現過程は➀➁➂です。
➀まず「.flash」をクリックして「.box」をチカチカさせます。
➁次に「.unity」をクリックして「.box」を隠してください。
➂最後に「.split」をクリックしたときに、再び「.box」がチカチカしてしまうと思います。
この2回目のチカチカが不要です。
そこで、➀のチカチカが終わったタイミングで「.flash」を削除したいのですが、どうしたらできますでしょうか?
###該当のソースコード
実際のサンプル
html
1<div class="wrapper"> 2 3 <div class="inner left"> 4 <div class="box animated">box</div> 5 <button type="button" id="flash">flash</button> 6 </div> 7 8 <div class="inner right"> 9 <button type="button" id="unity">unity</button> 10 <button type="button" id="split">split</button> 11 </div> 12 13</div> 14 15
css
1/* 基本のデザイン */ 2.wrapper { 3 display: flex; 4} 5.wrapper.unity .left { 6 display: none; 7} 8.wrapper.unity .right { 9 width: 440px; 10} 11.inner { 12 width: 200px; 13 height: 200px; 14 background: tan; 15 margin: 10px; 16 padding: 10px; 17} 18.box { 19 background: gold; 20} 21 22/* アニメーション */ 23.box.animated.flash { 24 -webkit-animation-duration: 1s; 25 animation-duration: 1s; 26 -webkit-animation-name: box_flash; 27 animation-name: box_flash; 28} 29@-webkit-keyframes box_flash { 30 from, 31 50%, 32 to { 33 opacity: 1; 34 } 35 36 25%, 37 75% { 38 opacity: 0; 39 } 40} 41@keyframes box_flash { 42 from, 43 50%, 44 to { 45 opacity: 1; 46 } 47 48 25%, 49 75% { 50 opacity: 0; 51 } 52}
jQuery
1// フラッシュさせる 2$('#flash').click(function(){ 3 $('.box').addClass('flash') 4}); 5 6// 統一する 7$('#unity').click(function(){ 8 $('.wrapper').addClass('unity'); 9}); 10 11// 分割する 12$('#split').click(function(){ 13 $('.wrapper').removeClass('unity'); 14});
###補足
「.flash」を削除したいのは、➀のチカチカが終わったタイミングです。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/29 10:00
退会済みユーザー
2019/07/29 10:05
2019/07/29 10:11