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

请参见示例A。

或者如果checkbox不是，则可以使用 CSS 禁用初始动画checked：

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

请参见示例B。

Answer 2

此问题已在PR#996中修复，并将在下一个版本中提供v.0.5.10。

修复是为了确保动画仅应用于使用:focus伪选择器具有焦点的元素，如本Codepen 演示中所示