如何让CSS动画只在点击时而不在页面加载？ [英] How to have CSS animation only on click and not on page load?

问题描述

我正在使用 https://github.com/FezVrasta/bootstrap-material-design在我的项目中更具体地说是复选框这个问题关注于复选框组件，整个库正在我的项目中使用。

 < label class =control-label> 
< div class =checkbox display-inline-block> 
< label> 
< input type =checkboxdata-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中的其他元素实例化它，为什么不使用类似这样的东西：

$

b
$ b

  $（'label'）。click（function（）{
 $ .material.checkbox（）; 
}） ; 
  

请参阅 示例A 。

或者如果复选框可能使用CSS禁用初始动画不是已检查：

 输入[ type = checkbox]：not（：checked）+ .checkbox-material：before {
 -webkit-animation：none！important; 
 -moz-animation：none！important; 
 -o-animation：none！important; 
 -ms-animation：none！important; 
动画：无！重要; 
} 
  

请参阅 示例B 。

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.

<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

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

解决方案

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

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

See Example A.

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

See Example B.

这篇关于如何让CSS动画只在点击时而不在页面加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！