2

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?

T J
  • 42,762
  • 13
  • 83
  • 138
Grady D
  • 1,889
  • 6
  • 30
  • 61

2 Answers2

2

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.

cch
  • 3,336
  • 8
  • 33
  • 61
  • Good alternative but from a UI prospective this does not work. We need a checkbox in this location. – Grady D Mar 23 '15 at 18:10
  • That is much closer and is something that we could consider but it completely removes the effect even after the page is loaded. The goal to have a plain checkbox (just a square) and only animate on click and not on page load or anything. – Grady D Mar 23 '15 at 18:17
  • What if you edit [material.js](https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/js/material.js) file and set the `options` for `checkbox` to `false`. This way you maybe then initiate it on click? – cch Mar 23 '15 at 18:30
  • That will not stop the CSS animation from being triggered. My understanding is that the javascript only adds the element and that the CSS is what actually does the cool stuff, do I have it backwards? – Grady D Mar 23 '15 at 18:31
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73604/discussion-between-grady-d-and-cchacholiades). – Grady D Mar 23 '15 at 18:34
0

This issue is fixed with PR#996 and will be available from the next release 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

T J
  • 42,762
  • 13
  • 83
  • 138