Checkboxes and Radio buttons should not animate on page load

This commit is contained in:
shannabarnard 2016-01-26 18:31:52 +00:00
parent 80c869196b
commit 10bf3836f2
9 changed files with 57 additions and 20 deletions

View File

@ -898,9 +898,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
-webkit-animation: checkbox-off 0.3s forwards; -webkit-animation: checkbox-off;
-o-animation: checkbox-off 0.3s forwards; -o-animation: checkbox-off;
animation: checkbox-off 0.3s forwards; animation: checkbox-off;
} }
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after { .checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2; opacity: 0.2;
@ -951,6 +951,11 @@ fieldset[disabled] .checkbox input[type=checkbox],
-o-transform: rotate(-45deg); -o-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.is-focused .checkbox .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards;
}
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before { .is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms; -webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms; -o-animation: rippleOn 500ms;
@ -1391,9 +1396,9 @@ fieldset[disabled] .form-group.is-focused .radio label {
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
.radio label input[type=radio]:checked ~ .check:after { .radio label input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms; -webkit-animation: rippleOn;
-o-animation: rippleOn 500ms; -o-animation: rippleOn;
animation: rippleOn 500ms; animation: rippleOn;
} }
.radio input[type=radio] { .radio input[type=radio] {
opacity: 0; opacity: 0;
@ -1435,6 +1440,11 @@ fieldset[disabled] .form-group.is-focused .radio label {
.theme-dark .radio input[type=radio][disabled] ~ .circle { .theme-dark .radio input[type=radio][disabled] ~ .circle {
border-color: #ffffff; border-color: #ffffff;
} }
.is-focused .radio input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;

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

@ -68,7 +68,7 @@
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
animation: checkbox-off @mdb-checkbox-animation-check forwards; animation: checkbox-off;
} }
} }
@ -132,9 +132,14 @@
} }
} }
// Prevent ripple effect on page load // Prevent checkbox animation and ripple effect on page load
.is-focused { .is-focused {
.checkbox { .checkbox {
.checkbox-material {
.check:before {
animation: checkbox-off @mdb-checkbox-animation-check forwards;
}
}
input[type=checkbox] { input[type=checkbox] {
&:checked { &:checked {
& + .checkbox-material:before { & + .checkbox-material:before {

View File

@ -60,9 +60,8 @@
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn;
} }
} }
input[type=radio] { input[type=radio] {
@ -91,6 +90,15 @@
} }
} }
// Prevent ripple effect on page load
.is-focused {
.radio {
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;

View File

@ -70,7 +70,7 @@
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
animation: checkbox-off $mdb-checkbox-animation-check forwards; animation: checkbox-off;
} }
} }
@ -116,7 +116,6 @@
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
} }
} }
} }
@ -135,9 +134,14 @@
} }
} }
// Prevent ripple effect on page load // Prevent checkbox animation and ripple effect on page load
.is-focused { .is-focused {
.checkbox { .checkbox {
.checkbox-material {
.check:before {
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
}
input[type=checkbox] { input[type=checkbox] {
&:checked { &:checked {
& + .checkbox-material:before { & + .checkbox-material:before {
@ -182,6 +186,7 @@
20px -12px 0 11px; 20px -12px 0 11px;
} }
} }
@keyframes checkbox-off { @keyframes checkbox-off {
0% { 0% {
box-shadow: box-shadow:
@ -193,7 +198,6 @@
20px -12px 0 11px, 20px -12px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
} }
25% { 25% {
box-shadow: box-shadow:
0 0 0 10px, 0 0 0 10px,
@ -250,6 +254,7 @@
0px 0 0 0 inset; 0px 0 0 0 inset;
} }
} }
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -261,6 +266,7 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

View File

@ -57,7 +57,7 @@ legend {
border: 0; border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider { .divider {
background-color: rgba(229, 229, 229, 0.12); background-color: rgba(0, 0, 0, .12);
} }
li { li {
overflow: hidden; overflow: hidden;

View File

@ -62,9 +62,8 @@
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn;
} }
} }
input[type=radio] { input[type=radio] {
@ -93,6 +92,15 @@
} }
} }
// Prevent ripple effect on page load
.is-focused {
.radio {
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;