【问题标题】: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 文件并将optionscheckbox 设置为false 会怎样。这样你可能会在点击时启动它?
  • 这不会阻止 CSS 动画被触发。我的理解是 javascript 只添加了元素,而 CSS 才是真正的酷东西,我是否把它倒过来了?
【解决方案2】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-03-23
    • 2012-10-16
    • 1970-01-01
    • 2014-02-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多