CSSアニメーションポップインでポップアウトは再びお互い

Question

と衝突した後、私は私が起こる見て期待していなかった特有の問題を持っています。状況のためにHere is a codepen。これはケースです：

私はボタンクリックでポップアップ表示され、閉じた後に「で」ポップ隠されたdiv要素を持っています。これはjQueryのshow/hideで処理されます。 UXでは、CSSを使って微妙なポップインアニメーションを追加したかったのです。それが表示されているデフォルトのCSSの状態に戻ります

.popout { animation: popout .2s ease;} 
.popin { animation: popin .2s ease;} 

@keyframes popout { 
    from {transform:scale(0)} 
    90% {transform:scale(1.1)} 
    to {transform:scale(1)} 
} 
@keyframes popin { 
    from {transform:scale(1)} 
    10% {transform:scale(1.1)} 
    to {transform:scale(0)} 
} 

今のアニメーションが正常に動作しますが、ポップアップを閉じた後（POPINクラスを追加）：私は、次の追加しました。その結果、ポップアップが縮小してから再び表示されるのが見えます。 CSSアニメーションコールにforwardsを追加することでこれを修正することはできますが、これにより、もう一方のクリックに関係なくアニメーションが継続されます。言い換えると; forwardsをCSSアニメーションに追加すると、非表示のままですが、再度開くと表示されません（forwardsはまだアクティブなので）。

私は再びあなたが見る、それに自分を試すことができますthe Codepenを参照してください。 クラスにforwardsを追加すると、閉じた後は非表示のままですが、再び開くことはできません。

私の思考プロセスが間違っていたところだから私は思ったんだけど。 forwardsの設定を「上書き」または「停止」できますか？私は明白な何かを欠いていますかまたは、これを行う方法ではないのですか？代わりにjQueryアニメーションを調べる必要がありますか？

Answer 1

まず、popin/popoutクラスを追加すると、古いものが削除されないため、要素の両方で終わるので、制御するのがさらに難しくなります（不可能ではないにしても）。

$('.open').click(function() { 
    //... 
    $('popup').removeClass('popin').addClass('popout'); 
}); 

$('.close').click(function() { 
    //... 
    $('popup').removeClass('popout').addClass('popin'); 
}) 

はまた、あなたはアニメーションが終了すると、要素は何CSSルールがそれに適用するために復帰することを考慮に入れる必要があります。

.popout { 
    /* ... */ 
    transform: scale(1); 
} 
.popin { 
    /* ... */ 
    transform: scale(0); 
} 

の作業例：https://codepen.io/anon/pen/Emvjaj

---

サイドノートを：をする代わりに、互いを交換する2つのボタンがあるのだからあなたはあなたがそれらが持続する場合、クラス定義にscale()変換を追加する必要があります状態に基づいて、あなたは1つのボタンしか持たず、あなたが呼んでいる機能の中で状態の変化を処理することをお勧めします。一部のブラウザー/デバイスでは、スイッチ操作時に両方のボタンをクリックすることがあります。 1つのボタンでより安全です。

Answer 2

コードサンプルで をテストしましたが、代替クラスを削除してforward-fillプロパティをそのまま残しておけば、コードは正常に動作しているようです。