如何仅在单击而不是在页面加载时具有 CSS 动画？答案

【问题标题】：How to have CSS animation only on click and not on page load?如何仅在单击而不是在页面加载时具有 CSS 动画？
【发布时间】：2015-03-23 17:44:15
【问题描述】：

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

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

【问题讨论】：

页面加载时不触发初始化？
我正在使用整个项目，我应该更清楚我的措辞。如果我不在页面加载时初始化，其他元素将不起作用。

标签： javascript html css twitter-bootstrap bootstrap-material-design

【解决方案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。

【讨论】：

不错的选择，但从用户界面的角度来看，这不起作用。我们需要在这个位置有一个复选框。
这更接近并且是我们可以考虑的，但即使在页面加载后它也会完全消除效果。目标是有一个普通的复选框（只是一个正方形），并且只在点击时动画，而不是在页面加载或任何东西上。
如果您编辑material.js 文件并将options 的checkbox 设置为false 会怎样。这样你可能会在点击时启动它？
这不会阻止 CSS 动画被触发。我的理解是 javascript 只添加了元素，而 CSS 才是真正的酷东西，我是否把它倒过来了？
让我们continue this discussion in chat。

【解决方案2】：

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

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

【讨论】：