jquery（this）.parent.hasClassアニメーション中に偽陽性を表示する

Question

私はCSSアニメーションとjQueryを使ってカレンダーに複数のフラップを開きます。これは、ユーザーがアニメーションが終了するのを待ってから次のアニメーションをクリックしている間は素晴らしいものです。しかし、オープニングアニメーションがまだ実行中で、ユーザーが既に次のアニメーションを開始すると、スクリプトが壊れ、.fenster divおよびwindowレイアウトからクラスopendが削除されます。

誰かが私のスクリプトに問題があるのを見ていませんか？

$(document).on("click" , '.flap' , function(){ 
 
    if ($(this).parent(".fenster").hasClass("opend")) { 
 
\t  $(this).removeClass("flap_open").addClass("flap_close"); 
 
\t \t $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
 
\t \t  $(this).next().hide(); 
 
\t \t  $(this).removeClass("flap_close"); 
 
\t \t  $(this).parent(".fenster").removeClass("opend"); 
 
\t \t }); 
 
\t } else { 
 
\t  $(this).addClass("flap_open"); 
 
\t  $(this).parent(".fenster").addClass("opend"); 
 
\t  //$(this).removeClass("flap_close"); 
 
\t  $(this).next().show(); 
 
\t } \t 
 
});

.fenster { 
 
\t width: 30%; 
 
\t min-width: 130px; 
 
\t max-width: 300px; 
 
\t border: 1px solid rgba(212, 212, 212, 1); 
 
\t position: relative; 
 
    left: 200px; 
 
\t z-index: 200; 
 
\t cursor: pointer; 
 
} 
 
.opend { 
 
\t perspective: 1500px; 
 
\t -webkit-perspective: 1500px; 
 
\t box-shadow: inset 0px 0px 5px #2e2d2e; 
 
\t cursor: auto; 
 
\t -webkit-backface-visibility: hidden; 
 
} 
 
.flap { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 100; 
 
    background-color: red; 
 
} 
 
.flap:before { 
 
\t content: ""; 
 
\t display: block; 
 
\t padding-top: 75%; 
 
} 
 
.flap_open { 
 
\t transform-origin: 0 50%; 
 
\t -webkit-transform-origin: 0 50%; 
 
\t background-size: cover; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 100; 
 
\t cursor: alias; 
 
\t animation: turn 4s forwards; 
 
\t -webkit-animation: turn 4s forwards; 
 
\t box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
} 
 
.flap_close { 
 
\t transform-origin: 0 50%; 
 
\t -webkit-transform-origin: 0 50%; 
 
\t -webkit-animation: zumachen 4s forwards; 
 
\t animation: zumachen 4s forwards; 
 
\t opacity: 0.8; 
 
\t box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
\t transform: rotateY(-100deg); 
 
} 
 
.button{ 
 
\t position: absolute; 
 
\t bottom: 2%; 
 
\t left: 15%; 
 
\t width: 70%; 
 
\t height: 5vh; 
 
\t min-width: 80px; 
 
\t min-height: 28px; 
 
\t max-height: 20px; 
 
\t z-index: -1; 
 
\t text-align: center; 
 
\t display: table; 
 
    background-color: grey; 
 
} 
 
@keyframes turn { 
 
    to { 
 
\t transform: rotateY(-100deg); 
 
\t opacity: 0.8; 
 
\t box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
\t visibility: visible; 
 
    } 
 
} 
 
@-webkit-keyframes turn { 
 
    to { 
 
\t -webkit-transform: rotateY(-100deg); 
 
\t -webkit-opacity: 0.8; 
 
\t box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
\t visibility: visible; 
 
    } 
 
} 
 
@keyframes zumachen { 
 
    to { 
 
\t transform: rotateY(0deg); 
 
\t opacity: 1; 
 
\t box-shadow: none; 
 
\t visibility: visible; 
 
    } 
 
} 
 
@-webkit-keyframes zumachen { 
 
    to { 
 
\t -webkit-transform: rotateY(0deg); 
 
\t -webkit-opacity: 1; 
 
\t box-shadow: none; 
 
\t visibility: visible; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fenster f7 p3"> 
 
<div class="flap"></div> 
 
<div class="button" style="display: none;"><span>Something</span></div> 
 
</div> 
 
<div class="fenster f3 p1"> 
 
<div class="flap"></div> 
 
<div class="button" style="display: none;"><span>Something</span></div> 
 
</div>

Answer 1

を休ま

$(document).on("click" , '.flap' , function(){ 
     if ($(this).parent(".fenster").hasClass("justEmptyClass")) { 
      $(this).parent(".fenster").removeClass("justEmptyClass"); 

または変数を使用する偽/ RUEでは、設定や状態を確認しますが実行されている場合は、チェックを実行して、現在アニメーション化されている要素が、いずれの終了要素でも呼び出された.removeClass()メソッドの影響を受けないことを確認できます。

1. それは再びあなたが削除することができ、あなたの最初の 条件文のelseコードブロックに追加.one()方法この前述のクラスに アニメーション
2. に一度 であることを示す、アニメーション要素にクラスを追加します。アニメーションが完了しました
3. 質問の要素にはクラスがないことを確認するために、最初の.one()メソッドの別の条件付きチェックを 最初の条件付きチェックを挿入します.animation-runningしたがって、必要なクラスを削除する必要があることを示す を示します。

$(document).on("click", ".flap", function() { 
 
    if ($(this).parent(".fenster").hasClass("opend")) { 
 
    $(this).removeClass("flap_open").addClass("flap_close"); 
 
    $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
 
     if (!$(this).parent(".fenster").hasClass("animation-running")) { 
 
     /* only step into next code block if condition is equal to true, 
 
     * i.e: parent does not have the class "animation-running", so animation is completed 
 
     */ 
 
     $(this).next().hide(); 
 
     $(this).removeClass("flap_close"); 
 
     $(this).parent(".fenster").removeClass("opend"); 
 
     } 
 
    }); 
 
    } else { 
 
    $(this).addClass("flap_open"); 
 
    $(this).parent(".fenster").addClass("opend animation-running"); /* Additional class to indicate animation is running */ 
 
    $(this).next().show(); 
 
    /* Only once animation has completed should the indicating class be removed */ 
 
    $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
 
     $(this).parent(".fenster").removeClass("animation-running"); 
 
    }); 
 
    } 
 
});

.fenster { 
 
    width: 30%; 
 
    min-width: 130px; 
 
    max-width: 300px; 
 
    border: 1px solid rgba(212, 212, 212, 1); 
 
    position: relative; 
 
    left: 200px; 
 
    z-index: 200; 
 
    cursor: pointer; 
 
} 
 

 
.opend { 
 
    perspective: 1500px; 
 
    -webkit-perspective: 1500px; 
 
    box-shadow: inset 0px 0px 5px #2e2d2e; 
 
    cursor: auto; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 
.flap { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 100; 
 
    background-color: red; 
 
} 
 

 
.flap:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 75%; 
 
} 
 

 
.flap_open { 
 
    transform-origin: 0 50%; 
 
    -webkit-transform-origin: 0 50%; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 100; 
 
    cursor: alias; 
 
    animation: turn 4s forwards; 
 
    -webkit-animation: turn 4s forwards; 
 
    box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
} 
 

 
.flap_close { 
 
    transform-origin: 0 50%; 
 
    -webkit-transform-origin: 0 50%; 
 
    -webkit-animation: zumachen 4s forwards; 
 
    animation: zumachen 4s forwards; 
 
    opacity: 0.8; 
 
    box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
    transform: rotateY(-100deg); 
 
} 
 

 
.button { 
 
    position: absolute; 
 
    bottom: 2%; 
 
    left: 15%; 
 
    width: 70%; 
 
    height: 5vh; 
 
    min-width: 80px; 
 
    min-height: 28px; 
 
    max-height: 20px; 
 
    z-index: -1; 
 
    text-align: center; 
 
    display: table; 
 
    background-color: grey; 
 
} 
 

 
@keyframes turn { 
 
    to { 
 
    transform: rotateY(-100deg); 
 
    opacity: 0.8; 
 
    box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
    visibility: visible; 
 
    } 
 
} 
 

 
@-webkit-keyframes turn { 
 
    to { 
 
    -webkit-transform: rotateY(-100deg); 
 
    -webkit-opacity: 0.8; 
 
    box-shadow: 5px 0px 5px 0px #2e2d2e; 
 
    visibility: visible; 
 
    } 
 
} 
 

 
@keyframes zumachen { 
 
    to { 
 
    transform: rotateY(0deg); 
 
    opacity: 1; 
 
    box-shadow: none; 
 
    visibility: visible; 
 
    } 
 
} 
 

 
@-webkit-keyframes zumachen { 
 
    to { 
 
    -webkit-transform: rotateY(0deg); 
 
    -webkit-opacity: 1; 
 
    box-shadow: none; 
 
    visibility: visible; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fenster f7 p3"> 
 
    <div class="flap"></div> 
 
    <div class="button" style="display: none;"><span>Something</span></div> 
 
</div> 
 
<div class="fenster f3 p1"> 
 
    <div class="flap"></div> 
 
    <div class="button" style="display: none;"><span>Something</span></div> 
 
</div>

Answer 2

私はそのプログラムを伝えるためだと思う- あなたがクラスを削除するので、「これはクラス自動的に開いていた場合、クリックの上、いくつか、時間の取り方、仕事をすると自動的に開いたクラスを削除します」最後にクリックした場合、終了プログラムでそのポイントには戻りません。途中で他のインジケータを使って状態を確認することができます。元の場合： - ：あなたがアニメーションを表すクラスを追加する場合

var open = true; 
$(document).on("click" , '.flap' , function(){ 
     if (open) { 
      open = false; 

//とあなたのコード