CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-material-design
Grady D
Grady D

Reputation: 2019

How to have CSS animation only on click and not on page load?

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?

Upvotes: 2

Views: 1117

Answers (2)

T J
T J

Reputation: 43156

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

Upvotes: 0

cch
cch

Reputation: 3386

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.

Upvotes: 2

Related Questions