Checkboxes should not animate on page load

This commit is contained in:
shannabarnard 2016-01-25 23:36:15 +00:00
parent 948a10eefc
commit 80c869196b
6 changed files with 63 additions and 16 deletions

View File

@ -918,9 +918,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
-webkit-animation: rippleOn;
-o-animation: rippleOn;
animation: rippleOn;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards;
@ -928,9 +928,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
-webkit-animation: rippleOff;
-o-animation: rippleOff;
animation: rippleOff;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards;
@ -951,6 +951,16 @@ fieldset[disabled] .checkbox input[type=checkbox],
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.is-focused .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
@-webkit-keyframes checkbox-on {
0% {
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
@ -2617,7 +2627,7 @@ fieldset[disabled] .navbar .btn-link:focus {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.dropdown-menu .divider {
background-color: rgba(229, 229, 229, 0.12);
background-color: rgba(0, 0, 0, 0.12);
}
.dropdown-menu li {
overflow: hidden;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -98,7 +98,7 @@
}
& + .checkbox-material:before {
animation: rippleOn @mdb-checkbox-animation-ripple;
animation: rippleOn;
}
& + .checkbox-material .check:after {
@ -109,12 +109,11 @@
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff @mdb-checkbox-animation-ripple;
animation: rippleOff;
}
& + .checkbox-material .check:after {
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
}
@ -133,6 +132,24 @@
}
}
// Prevent ripple effect on page load
.is-focused {
.checkbox {
input[type=checkbox] {
&:checked {
& + .checkbox-material:before {
animation: rippleOn @mdb-checkbox-animation-ripple;
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff @mdb-checkbox-animation-ripple;
}
}
}
}
}
@keyframes checkbox-on {
0% {
box-shadow:
@ -162,6 +179,7 @@
20px -12px 0 11px;
}
}
@keyframes checkbox-off {
0% {
box-shadow:
@ -173,7 +191,6 @@
20px -12px 0 11px,
0 0 0 0 inset;
}
25% {
box-shadow:
0 0 0 10px,
@ -230,6 +247,7 @@
0px 0 0 0 inset;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -241,6 +259,7 @@
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;

View File

@ -100,7 +100,7 @@
}
& + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple;
animation: rippleOn;
}
& + .checkbox-material .check:after {
@ -111,7 +111,7 @@
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff $mdb-checkbox-animation-ripple;
animation: rippleOff;
}
& + .checkbox-material .check:after {
@ -135,6 +135,24 @@
}
}
// Prevent ripple effect on page load
.is-focused {
.checkbox {
input[type=checkbox] {
&:checked {
& + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple;
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff $mdb-checkbox-animation-ripple;
}
}
}
}
}
@keyframes checkbox-on {
0% {
box-shadow: