0

Animation always play when an element from display:none to shown status. If I want style a custom checkbox. I only need it play animate when user check or uncheck it.

input[type=checkbox] { opacity: 0; } // native checkbox hidden
input[type=checkbox] ~ .mycheck {
    animation: uncheck 300ms ease-out forwards; // play uncheck animate
}
input[type=checkbox]:checked ~ .mycheck {
    animation: check 300ms ease-out forwards; // play checked animate
}

The issue is check and uncheck not only play when user click it. It play when page load also. Or when the parent element switch hidden to shown. e.g. in bootstrap tabs.

I know javascript can deal with it easily. But in fact, this issue come from an interest github project https://github.com/FezVrasta/bootstrap-material-design/issues/48. That handsome boy want implement google material design by bootstrap3.

Currently I can think of a way(not perfect). When :not(:hover) set animation-duration: 1ms;. Let animate ended quickly. But user still look a short flickr.

input[type=checkbox]:not(:hover) ~ .mycheck {
    animation-duration: 1ms;
}

Cannot set to 0ms. otherwise animate doesn't played until user hover it.

Is there any better ways?

T J
  • 42,762
  • 13
  • 83
  • 138
colder
  • 644
  • 7
  • 12

1 Answers1

1

You could use the solution you thought about with the :not(:hover) and simply cancel the animation with:

input[type=checkbox]:not(:hover) ~ .mycheck {
    animation: none;
}

or, and I think it is the best solution here, don't use animations, and use transitions instead. That would result in something like that (assuming you're animating the opacity) :

input[type=checkbox] ~ .mycheck {
    opacity: 0;
    transition: opacity .3s ease-out;
}

input[type=checkbox]:checked ~ .mycheck {
    opacity: 1;
}

Also, depending on the browsers support you want to achieve, mind the vendor prefixes, as Chrome only recently dropped them on the transition property

EDIT: After some testing, I've come to think using only the :focus pseudo-class should be enough:

input[type=checkbox]:focus ~ .mycheck {
    animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus:checked ~ .mycheck {
    animation: check 300ms ease-out forwards;
}

The only drawback i can see is when the checkbox loses focus, the animation may get canceled

Antoine Combes
  • 1,444
  • 8
  • 13
  • yeah you are right. but that effect is hard for transition. here is google official(maybe) repo. they use animation to do that: . your code `animation: none;` is a better choice. thanks. – colder Oct 01 '14 at 11:30
  • `animation: none;` make other issue. the animation played when hover... – colder Oct 01 '14 at 11:41
  • You're right, this just shifts your problem :( To my knowledge, CSS doesn't have a way to handle the click directly, but you could use some combination of both `:hover` and `:focus` so you the animation is active only when you're hovering the checkbox and after you have given it the focus. I'll edit my answerto give you an idea of what i'm talking about. – Antoine Combes Oct 01 '14 at 14:41