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

它运作成功，但并不完美，因为在INITIAL单击复选框（这意味着在页面加载后），您必须单击它两次才能执行第一个动画。我试过了event.stopPropagation()，但它仍然是一样的。我也试过event.preventDefault()，但它只适用于第一个动画。

Answer 1

我会听取更改事件而不是标签的点击事件 - 您可能面临竞争条件。

我的HTML看起来像这样：

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

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

该复选框的ID为toggles-animation，这是我们收听更改的元素。

里面的元素上面有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

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

1 个答案: