1回のCSS3変換後にCSS3を2回変換する

Question

私はHTML5のjQueryカードメモリゲームを使用しています。 2枚のカードが一致したときにアニメーションを再生したいのですが、反転したカードに既に"transform: rotationY(180deg)"を適用しているので、バグがあります。

カードのHTML

<div id="card1" class="card"> 
    <figure class="front"> 
     <img src="front.jpg"> 
    </figure> 
    <figure class="back"> 
     <img src="back.jpg"> 
    </figure> 
</div> 

まずプレイヤーはこのことを明らかにし、私はそれにクラスを「裏返し」を追加します。

.flipped { 
    transform: rotateY(180deg); 
} 

次に、「反転」クラスを削除し、scaleOutクラスを追加します。回転Yは、右サイドがプレーヤに示され続けるように回転を維持するためにあり、スケールはカードを隠すためにそこにある。

.scaleOut { 
    -webkit-transform: rotateY(180deg) scale(0.0); 
} 

これは、フリップしたクラスを追加するだけで正常にカードを反転させても動作しないようです。 Chromeはアニメーションを実行するように見えますが、Firefoxは瞬時に再生しますが、Firefoxはスケールアニメーションをまったく再生しません。

ここで私はクラスを変更するコードです。クラスを追加したり削除したりします。

$(#card1).removeClass('flipped'); 
$(#card1).addClass('scaleOut'); 

カードやボードCSS

#board { 
    padding-top: 10px; 
    width: 600px; 
    height: 450px; 
    background-color: rgb(228, 223, 208); 
    -webkit-perspective: 1000px; 
    perspective: 1000px; 
} 

.card { 
    float:left; 
    width: 106px; 
    height: 100px; 
    margin-left: 10px; 
    margin-bottom: 10px; 
    border: 1px solid #cfcfcf; 
    cursor: pointer; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    transition: transform 1s; 
} 

Answer 1

私はそれがこのように発生したが、scale(1)がtransform.flipped内のクラスに設定されている場合、それは正常に動作しているようだ理由として理由を持っていません。 scale(1)が初期状態で、カードが反転しても一致しないときにカードが表示されるはずであるため、これをtransformプロパティに追加すると問題が発生するはずはありません。（理由を見つけると）

これはChrome、Firefox、Edgeの最新バージョンで問題なく動作します。

注：スニペットは、ボードとカード用のCSSを更新する前に用意されています。 CSSは少し異なりますが、ソリューションはあなたのケースではまだ動作するはずです。

var temp1 = $('#card1'); 
 
temp1.on('click', function() { 
 
    temp1.addClass('flipped'); 
 
    setTimeout(function() { 
 
    temp1.removeClass('flipped'); 
 
    temp1.addClass('scaleOut'); 
 
    }, 2500); 
 
}) 
 
''

.flipped { 
 
    transform: rotateY(180deg) scale(1); 
 
} 
 
.scaleOut { 
 
    transform: rotateY(180deg) scale(0); 
 
} 
 
.front { 
 
    background: yellowgreen; 
 
} 
 
.back { 
 
    background: green; 
 
} 
 
.card { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s; 
 
} 
 
figure { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    backface-visibility: hidden; 
 
} 
 
.back { 
 
    transform: rotateY(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="card1" class="card"> 
 
    <figure class="front"> 
 
    <img src="front.jpg"> 
 
    </figure> 
 
    <figure class="back"> 
 
    <img src="back.jpg"> 
 
    </figure> 
 
</div>