javascript - 如何只在点击而不是页面加载时使用 CSS 动画？

Question

我正在使用 https://github.com/FezVrasta/bootstrap-material-design在我的元素中 更具体地说是复选框 这个问题集中在复选框组件上，整个库都在我的元素中使用。

<label class="control-label">
  <div class="checkbox display-inline-block ">
    <label>
      <input type="checkbox" data-check="false" />
      <span class="ripple"></span>
      <span class="check"></span>
    </label>
  </div>
</label>

问题是复选框在页面加载时触发动画并且看起来很奇怪。 LESS 代码是 https://github.com/FezVrasta/bootstrap-material-design/blob/master/less/_checkboxes.less#L88在这里可以看到一个例子http://codepen.io/anon/pen/ogmgRX

有谁知道如何停止在页面加载时出现的动画？

Answer 1

如果您正在为 DOM 中的其他元素实例化它，为什么不使用类似的东西:

$('label').click(function() { 
  $.material.checkbox();
});

参见 Example A .

或者，如果 checkbox 未被选中，则可能使用 CSS 禁用初始动画:

input[type=checkbox]:not(:checked) + .checkbox-material:before {
  -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

参见 Example B .