必须单击两次复选框才能执行动画

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');
    }
}

它成功但不是完美的，因为在首次单击复选框时（这意味着页面加载后），您必须单击两次，以便执行第一个动画。我尝试了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 - 我只是使用了同级元素。重要的是，有一个具有动画的课程，并且该类未被删除或添加，而是补充类是。

So，当检查时：<span class="animate clicked">

我创建了一个演示，背景开始绿松石并为粉红色动画。您可以在Codepen上看到工作演示：http：//codepen.io/tinacion/pen/pen/womozo