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不是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动画？

2 个答案: