title: checkbox has to be clicked twice to execute the animation
body: <p>I created a custom animated checkbox that looks like a switch. I used class names for modifying the animations of my checkbox. Here is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;label&gt;
      &lt;input class="cb" type="checkbox"&gt;
      &lt;div class="ball"&gt;&lt;/div&gt; &lt;!-- don't mind this --&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var $ = document.querySelector.bind(document);
  
  $('label').onclick = function() {
      if(!$('.cb').checked) {
          this.classList.add('clicked');
      } else {
          this.classList.remove('clicked');
      }
  }
  </code></pre>
  
  <p>It worked successfully, but not perfectly, because at INITIAL click of the checkbox (which means after the page load), you have to click it twice in order for the first animation to be executed. I tried <code>event.stopPropagation()</code> but it's still the same. I also tried <code>event.preventDefault()</code> but it only worked on first animation.</p>