1

プロジェクトで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

ページの読み込み時に表示されるアニメーションを停止する方法を知っている人はいますか?

4

2 に答える 2

2

DOM の他の要素に対してインスタンス化する場合は、次のようなものを使用しないでください:

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

例 Aを参照してください。

checkboxそうでない場合は、CSS を使用して初期アニメーションを無効にすることもでき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;
}

例 Bを参照してください。

于 2015-03-23T18:08:02.650 に答える