如何只在点击时有 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 and an example can be seen here http://codepen.io/anon/pen/ogmgRX

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

Answer 1

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

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

参见Example A。

或者如果 checkbox 不是 checked，可以使用 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。

Answer 2

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

解决方法是确保动画只应用到使用 :focus 伪选择器获得焦点的元素，如此 Codepen demo

所示

如何只在点击时有 CSS 动画，而不是在页面加载时？

How to have CSS animation only on click and not on page load?

html

javascript

css

twitter-bootstrap

bootstrap-material-design