CSS3を使用して作成されたカスタマイズされたラジオボタンで、リバースモードで遷移が発生しない

Question

私のウェブサイトにカスタマイズされたラジオボタンを使用しようとしています。私は同じことを実現しました。私はラジオボタンにトランジション効果を与えようとしましたが、それはまた働きました。私の懸念は、チェックされた状態でのみ動作します。ラジオボタンのチェックを外すと、トランジションが行われません（逆方向のトランジションは行われません）。それは単なる1つの方法です。あなたが見えるようにする効果にもbackground-colorを移行する必要が

<section class="radio"> 
    <input id="set_empty" type="radio" name="err_rec" value="1"> 
    <label for="set_empty">Set empty value for the column</label> 
    <input id="st_empty" type="radio" name="err_rec" value="1"> 
    <label for="st_empty">Set empty value for the column</label> 
</section> 

.radio{ 
    position: relative; 
    display: block; 
    margin-top: 10px; 
    margin-bottom: 10px; 
} 
.radio input[type="radio"], .check input[type="checkbox"] { 
    display: none; 
} 
.radio label, .check label { 
    min-height: 1em; 
    padding-left: 20px; 
    margin-bottom: 0; 
    font-weight: normal; 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    outline: none; 
} 
.radio label::before { 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    width: 12px; 
    height: 12px; 
    left: 0; 
    border: 1px solid #46bedc; 
    border-radius: 50%; 
    background-color: #fff; 
    top: 2px; 
} 
.radio label::after { 
    display: inline-block; 
    position: absolute; 
    content: " "; 
    width: 6px; 
    height: 6px; 
    left: 4px; 
    top: 4px; 
    border-radius: 50%; 
    -webkit-transform: scale(1.6, 1.6); 
    -ms-transform: scale(1.6, 1.6); 
    -o-transform: scale(1.6, 1.6); 
    transform: scale(1.6, 1.6); 
    -webkit-transition: transform .5s cubic-bezier(0.6,1,0,0.78); 
    -o-transition: transform .5s cubic-bezier(0.6,1,0,0.78); 
    transition: transform .5s ease; 
    top: 6px; 
} 
.radio input[type="radio"]:checked + label::after { 
    -webkit-transform: scale(1, 1); 
    -ms-transform: scale(1, 1); 
    -o-transform: scale(1, 1); 
    transform: scale(1, 1); 
    outline: none; 
    background-color: rgb(70, 190, 220); 
} 

Refer here

Answer 1

以下のコードを確認してください。遷移がなければ、すぐに色から透明に変化します。このため、transformの遷移は目に見えません。

.radio { 
 
    position: relative; 
 
    display: block; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.radio input[type="radio"], 
 
.check input[type="checkbox"] { 
 
    display: none; 
 
} 
 
.radio label, 
 
.check label { 
 
    min-height: 1em; 
 
    padding-left: 20px; 
 
    margin-bottom: 0; 
 
    font-weight: normal; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    outline: none; 
 
} 
 
.radio label::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    left: 0; 
 
    border: 1px solid #46bedc; 
 
    border-radius: 50%; 
 
    background-color: #fff; 
 
    top: 2px; 
 
} 
 
.radio label::after { 
 
    display: inline-block; 
 
    position: absolute; 
 
    content: " "; 
 
    width: 6px; 
 
    height: 6px; 
 
    left: 4px; 
 
    top: 4px; 
 
    border-radius: 50%; 
 
    transform: scale(1.6, 1.6); 
 
    transition: transform .5s ease, background-color .5s ease; 
 
    top: 6px; 
 
} 
 
.radio input[type="radio"]:checked + label::after { 
 
    transform: scale(1, 1); 
 
    outline: none; 
 
    background-color: rgb(70, 190, 220); 
 
}

<section class="radio"> 
 
    <input id="set_empty" type="radio" name="err_rec" value="1"> 
 
    <label for="set_empty">Set empty value for the column</label> 
 
    <input id="st_empty" type="radio" name="err_rec" value="1"> 
 
    <label for="st_empty">Set empty value for the column</label> 
 
</section>