I am styling some checkoxes and in my code there is this kind of situation: I have some kind of settings that you need to open and close to see. There are some custom checkboxes using label. I would like to have some animation when you deselect it. Right now it works, but unfortunately the animation shows also if the settings were just opened. Here is simple representation of my problem:
function link(n){
if (n==1)
document.getElementById('tile1').style.display="block";
if (n==2)
document.getElementById('tile1').style.display="none";
}:root{
--w50color1:coral;
}
.tile1{
height:50px;
width:418px;
text-align:center;
line-height:50px;
border:none;
align-items:baseline;
}
.tilea input[type="checkbox"] {/*checkboxes window 1*/
height:21px;
width:30px;
top:6px;
opacity:0;
position:relative;
}
.tilea label::before {
height:20px;
width:20px;
content: "";
display: inline-block;
border: 2px solid;
border-radius:20px;
border-color:var(--w50color1);
top:0px;
left:-30px;
position:absolute;
}
.tilea label {
position: relative;
outline:none;
text-decoration:none;
}
.tilea input[type="checkbox"]:checked + label::before {
background-color:var(--w50color1);
}
.tilea input[type="checkbox"]:not(:checked) + label::before {
animation:closeout1 1s ease-out forwards;
-webkit-box-shadow:inset 0 0 5px 0 #4afa4a;
}
@keyframes closeout1{
from {-webkit-box-shadow:inset 0 0 0 10px var(--w50color1);}
to{-webkit-box-shadow: inset 0 0 0 0 var(--w50color1);}
}
.sspan{
font-size:18px;
}<html>
<head>
<link rel="stylesheet" href="cssb.css">
<meta charset="utf-8"/>
</head>
<body>
<button style="height:25px; width:50px;" onclick="link(1)">show</button>
<button style="height:25px; width:50px;" onclick="link(2)">hide</button>
<div class="tile1 tilea" id="tile1">
<input type="checkbox" id="chboxd1">
<label for="chboxd1" class="sspann">Some text</label>
</div>
</body>
</html>I understand that the cause of this problem is playing the animation when the checkbox is unchecked, I just don't know the solution. I would appreciate any insight.
Aucun commentaire:
Enregistrer un commentaire