アニメーションを実行するにはチェックボックスを2回クリックする必要があります

Question

私はスイッチのように見えるカスタムアニメーションのチェックボックスを作成しました。私は自分のチェックボックスのアニメーションを変更するためのクラス名を使用しました。ここに私のコードです：

HTML

<label> 
    <input class="cb" type="checkbox"> 
    <div class="ball"></div> <!-- don't mind this --> 
</label> 

Javascriptを

var $ = document.querySelector.bind(document); 

$('label').onclick = function() { 
    if(!$('.cb').checked) { 
     this.classList.add('clicked'); 
    } else { 
     this.classList.remove('clicked'); 
    } 
} 

それは理由（ページロード後に意味）チェックボックスの最初のクリックで、完璧に成功働いたが、ではない、あなたを最初のアニメーションを実行するには2回クリックする必要があります。私はevent.stopPropagation()を試しましたが、それはまだ同じです。私もevent.preventDefault()を試しましたが、それは最初のアニメーションでしか動作しませんでした。

Answer 1

ラベルのクリックイベントではなく、変更イベントを聞きます。競合状態になる可能性があります。

私のHTMLは次のようになります。

<label> 
    <input id="toggles-animation" type="checkbox"> 

    <span class="animate"> 
    Select me 
    </span> 
</label> 

チェックボックスがtoggles-animationのIDを持っており、これは我々が変更のために耳を傾けるの要素です。

内部の要素にはanimateクラスがあり、アニメーション化されます。この要素はclickedクラスを追加するために必要な要素なので、clickedとanimateの両方になります。

は、私たちは、チェックボックスの入力にonchangeリスナーを追加することによってこれを行うことができます。

var $ = document.querySelector.bind(document); 
var el = $('#toggles-animation'); 

el.onchange = function (evt) { 
    var animateElement = this.nextSibling.nextSibling; 
    var toggle = this.checked ? 'add' : 'remove'; 

    animateElement.classList[toggle]('clicked'); 
}; 

あなたはanimateElementあなたが好き-私は兄弟要素を使用する任意の方法を照会することができます。重要なのは、アニメーションを持つクラスがあり、クラスが削除または追加されていないが、補足クラスがあることです。チェックすると

ので、：<span class="animate clicked">

私は背景がターコイズを開始し、ピンク色にアニメーション化デモを作成しました。あなたはCodepenの作業デモを見ることができます：http://codepen.io/tinacious/pen/WoMoZo