make checkbox animate quickly when not hover.

it's not a perfect method. need improve.
by the way. add 'Thumbs.db' and '.DS_Store' to .gitignore.
This commit is contained in:
colder 2014-10-01 13:57:11 +08:00
parent 08a4e84585
commit b2eefc97ec
3 changed files with 14 additions and 3 deletions

5
.gitignore vendored
View File

@ -1,3 +1,6 @@
# https://git-scm.com/docs/gitignore # https://git-scm.com/docs/gitignore
# https://help.github.com/articles/ignoring-files # https://help.github.com/articles/ignoring-files
# Example .gitignore files: https://github.com/github/gitignore # Example .gitignore files: https://github.com/github/gitignore
Thumbs.db
.DS_Store

View File

@ -66,10 +66,17 @@
// Ripple effect on click // Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after { input[type=checkbox]:not(:checked) ~ .check:after {
.animation(rippleOff 500ms); .animation(rippleOff 500ms linear forwards);
} }
input[type=checkbox]:checked ~ .check:after { input[type=checkbox]:checked ~ .check:after {
.animation(rippleOn 500ms); .animation(rippleOn 500ms linear forwards);
}
// Make animate quickly when not hover
&:not(:hover) input[type=checkbox] ~ .check {
&:before, &:after {
.animation-duration(1ms);
}
} }
// Style for disabled inputs // Style for disabled inputs

View File

@ -98,6 +98,7 @@
-moz-animation-duration: @duration; -moz-animation-duration: @duration;
-ms-animation-duration: @duration; -ms-animation-duration: @duration;
-o-animation-duration: @duration; -o-animation-duration: @duration;
animation-duration: @duration;
} }
.animation-fill-mode(@mode) { .animation-fill-mode(@mode) {
-webkit-animation-fill-mode: @mode; -webkit-animation-fill-mode: @mode;