JavaScriptなしでクラスを切り替えるときに同じアニメーションを実行する方法

Question

私は、トライステートのチェックボックスとして機能する要素を持っています。状態が変わるたびに、その要素のアニメーションを実行したいと思います。基本的に、要素は、最初の状態を示すためにクラスが付けられていない状態から開始します。次に、ある状態のクラスを追加し、そのクラスを削除して、別の状態を第2の状態に追加します。

最初のクリックでは機能しますが、その後のクリックではアニメーションが再生されません。

$('button').click(function() { 
 
    var $div = $('div'); 
 
    if (!$div.hasClass('is-colored')) { 
 
    $div.addClass('green is-colored'); 
 
    } else { 
 
    $div.toggleClass('green red'); 
 
    } 
 
});

@keyframes Animation { 
 
    from { 
 
    opacity: 0; 
 
    transform: scaleX(0) scaleY(0); 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    transform: scaleX(1) scaleY(1); 
 
    } 
 
} 
 
.green { 
 
    background-color: #0F0; 
 
    -webkit-animation: Animation 0.25s linear forwards; 
 
    -moz-animation: Animation 0.25s linear forwards; 
 
    animation: Animation 0.25s linear forwards; 
 
} 
 

 
.red { 
 
    background-color: #F00; 
 
    /* I tried applying the animation on the second state but this isn't working */ 
 
    -webkit-animation: Animation 0.25s linear forwards; 
 
    -moz-animation: Animation 0.25s linear forwards; 
 
    animation: Animation 0.25s linear forwards; 
 
} 
 
div { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
 
<button>Change Color</button>

I know it's possible to restart an animation with JavaScriptと3年前のようには、要するにto do this without JavaScript.

ことはできていないようでした、それは同じことを行うことが可能である：ここでは私がこれまで持っているものですCSSのみを使用してクラスを切り替える（つまり、タイムアウトは必要ありません）同じ要素を複数回アニメーション化しますか？

Answer 1

状態はリセットされないため、アニメーションが再開しないためです。あなたがしたいのは、カラークラスがリセットされるときにカラークラスを削除し、「待機」（0秒）してアニメーションの新しいクラスを開始させることです。変更が緑のために、このようなものです

、完全な変更については、以下を参照してください。

$div.removeClass('green'); 

setTimeout(function() { 
    $div.addClass('red'); 
}, 0); 

編集：javascriptを遅滞なくこれを行うには。

$('button').click(function() { 
 
    var $div = $('div'); 
 
    if (!$div.hasClass('is-colored')) { 
 
    $div.addClass('green is-colored'); 
 
    } else { 
 
    $div.toggleClass('green red'); 
 
    } 
 
});

@keyframes Animation { 
 
    from { 
 
    opacity: 0; 
 
    transform: scaleX(0) scaleY(0); 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    transform: scaleX(1) scaleY(1); 
 
    } 
 
} 
 

 
@keyframes Animation2 { 
 
    from { 
 
    opacity: 0; 
 
    transform: scaleX(0) scaleY(0); 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    transform: scaleX(1) scaleY(1); 
 
    } 
 
} 
 

 
.green { 
 
    background-color: #0F0; 
 
    -webkit-animation: Animation 0.25s linear forwards; 
 
    -moz-animation: Animation 0.25s linear forwards; 
 
    animation: Animation 0.25s linear forwards; 
 
} 
 

 
.red { 
 
    background-color: #F00; 
 
    /* I tried applying the animation on the second state but this isn't working */ 
 
    -webkit-animation: Animation2 0.25s linear forwards; 
 
    -moz-animation: Animation2 0.25s linear forwards; 
 
    animation: Animation2 0.25s linear forwards; 
 
} 
 
div { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
 
<button>Change Color</button>