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

I am using https://github.com/FezVrasta/bootstrap-material-design in my project ~~more specifically the checkbox~~ this question is focused on the checkbox component, the entire library is being used in my project.

我在我的项目中使用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>

The problem is that the checkbox triggers an animation on page load and looks odd. The LESS code is 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

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

Does anyone know how to stop the animation for appearing on page load?

有谁知道如何阻止动画出现在页面加载?

2 个解决方案

#1

If you are instantiating it for the other elements in your DOM why not using something like:

如果要为DOM中的其他元素实例化它,为什么不使用以下内容:

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

See Example A.

见例A.

or maybe use CSS to disable initial animation if checkbox is not 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;
}

See Example B.

见例B.

#2

This issue is fixed with PR#996 and will be available from the next release v.0.5.10.

此问题已通过PR#996修复,可从下一版本v.0.5.10获得。

The fix was to make sure the animation is applied only to the elements having focus using the :focus pseudo selector as shown in this Codepen demo

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

#1