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

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

本文关键字：加载 动画 CSS      更新时间：2023-09-26

我正在使用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

有人知道如何停止出现在页面加载上的动画吗？

如果您正在为DOM中的其他元素实例化它，为什么不使用以下内容呢

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

请参见示例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;
}

请参见示例B。

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

修复方法是确保使用:focus伪选择器仅将动画应用于具有焦点的元素，如Codepen演示

所示
相关文章：