I have the following code in the template node, but whenever I inject payload to this checkbox, the manual click on the button on the dashboard becomes ineffective until I keep clicking it 2 times.
<label class="switch" class="toggle1">
<input type="checkbox"
ng-checked="checkboxModel || msg.payload"
ng-model="checkboxModel"
ng-true-value=true
ng-false-value=false
ng-change="send({payload: checkboxModel})">
<span></span>
</label>
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5449131-Switch-animation"
target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<style>
.switch {
cursor: pointer;
}
.switch input {
display: none;
}
.switch input + span {
top: 3px;
left: 14.5px;
width: 72px;
height: 42px;
border-radius: 21px;
transition: all 0.3s ease;
display: block;
position: relative;
background: #ff0000;
box-shadow: 0 8px 16px -1px rgba(255, 70, 81, 0.2);
}
.switch input + span:before, .switch input + span:after {
content: "";
display: block;
position: absolute;
transition: all 0.3s ease;
}
.switch input + span:before {
top: 7.5px;
left: 7.5px;
width: 27px;
height: 27px;
border-radius: 13.5px;
border: 5px solid #fff;
}
.switch input + span:after {
top: 7.5px;
left: 48px;
width: 9px;
height: 27px;
border-radius: 60%;
transform-origin: 50% 50%;
background: #fff;
opacity: 0;
}
.switch input + span:active {
transform: scale(0.92);
}
.switch input:checked + span {
background: #00ff00;
box-shadow: 0 0px 0px 0px rgba(72, 234, 139, 0.2);
}
.switch input:checked + span:before {
width: 0px;
border-radius: 4.5px;
margin-left: 40.5px;
border-width: 4.5px;
background: #fff;
}
.switch input:checked + span:after {
-webkit-animation: blobChecked 0.35s linear forwards 0.2s;
animation: blobChecked 0.35s linear forwards 0.2s;
}
.switch input:not(:checked) + span:before {
-webkit-animation: blob 0.85s linear forwards 0.2s;
animation: blob 0.85s linear forwards 0.2s;
}
@-webkit-keyframes blob {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(1.12, 0.94);
}
60% {
transform: scale(0.96, 1.06);
}
}
@keyframes blob {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(1.12, 0.94);
}
60% {
transform: scale(0.96, 1.06);
}
}
@-webkit-keyframes blobChecked {
0% {
opacity: 1;
transform: scaleX(1);
}
30% {
transform: scaleX(1.44);
}
70% {
transform: scaleX(1.18);
}
50%, 99% {
transform: scaleX(1);
opacity: 1;
}
100% {
transform: scaleX(1);
opacity: 0;
}
}
@keyframes blobChecked {
0% {
opacity: 1;
transform: scaleX(1);
}
30% {
transform: scaleX(1.44);
}
70% {
transform: scaleX(1.18);
}
50%, 99% {
transform: scaleX(1);
opacity: 1;
}
100% {
transform: scaleX(1);
opacity: 0;
}
}
html {
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
/*.switch {
cursor: pointer;
}
.switch input {
display: none;
}
.switch input + span {
width: 96px;
height: 56px;
border-radius: 28px;
transition: all 0.3s ease;
display: block;
position: relative;
background: #ff0000;
box-shadow: 0 8px 16px -1px rgba(255, 70, 81, 0.2);
}
.switch input + span:before, .switch input + span:after {
content: "";
display: block;
position: absolute;
transition: all 0.3s ease;
}
.switch input + span:before {
top: 10px;
left: 10px;
width: 36px;
height: 36px;
border-radius: 18px;
border: 5px solid #fff;
}
.switch input + span:after {
top: 10px;
left: 64px;
width: 12px;
height: 36px;
border-radius: 40%;
transform-origin: 50% 50%;
background: #fff;
opacity: 0;
}
.switch input + span:active {
transform: scale(0.92);
}
.switch input:checked + span {
background: #00ff00;
box-shadow: 0 8px 16px -1px rgba(72, 234, 139, 0.2);
}
.switch input:checked + span:before {
width: 0px;
border-radius: 6px;
margin-left: 54px;
border-width: 6px;
background: #fff;
}
.switch input:checked + span:after {
-webkit-animation: blobChecked 0.35s linear forwards 0.2s;
animation: blobChecked 0.35s linear forwards 0.2s;
}
.switch input:not(:checked) + span:before {
-webkit-animation: blob 0.85s linear forwards 0.2s;
animation: blob 0.85s linear forwards 0.2s;
}
@-webkit-keyframes blob {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(1.12, 0.94);
}
60% {
transform: scale(0.96, 1.06);
}
}
@keyframes blob {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(1.12, 0.94);
}
60% {
transform: scale(0.96, 1.06);
}
}
@-webkit-keyframes blobChecked {
0% {
opacity: 1;
transform: scaleX(1);
}
30% {
transform: scaleX(1.44);
}
70% {
transform: scaleX(1.18);
}
50%, 99% {
transform: scaleX(1);
opacity: 1;
}
100% {
transform: scaleX(1);
opacity: 0;
}
}
@keyframes blobChecked {
0% {
opacity: 1;
transform: scaleX(1);
}
30% {
transform: scaleX(1.44);
}
70% {
transform: scaleX(1.18);
}
50%, 99% {
transform: scaleX(1);
opacity: 1;
}
100% {
transform: scaleX(1);
opacity: 0;
}
}
html {
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}*/
</style>
