疑似要素の表示非表示にtransitionを設定したいです。

前提・実現したいこと

2種のラジオボタンがあります。
チェックが付いたものには、ボタンの内側に疑似要素で白いボーダーを表示します。

ボーダーの表示が一瞬で切り替わるので、transitionを有効にして、表示をふんわり切り替えたいです。

発生している問題・エラーメッセージ

ボーダーの表示が一瞬で切り替わります。

該当のソースコード

html
1<input type="radio" id="a" name="radio" hidden checked />
2<label for="a">A</label>
3<input type="radio" name="radio" id="b" hidden />
4<label for="b">B</label>

css
1label {
2  color: white;
3  padding: 5em;
4  position: relative;
5  display: inline-block;
6}
7
8label:nth-of-type(1) {
9  background: black;
10}
11
12label:nth-of-type(2) {
13  background: gray;
14}
15
16input:checked + label::before {
17  content: "";
18  position: absolute;
19  top: 1rem;
20  left: 1rem;
21  width: calc(100% - 2rem);
22  height: calc(100% - 2rem);
23  border: 2px solid white;
24  transition: border 1s;
25}

試したこと

疑似要素と疑似要素の親にtransitionを設定しみましたが、変化はありませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

描画されない状態から描画される状態になったときには transition は効果がありません。この場合、チェックボックスがチェックされてないときは::beforeが存在しないので、効果がないわけです。

次の例のように、常に::beforeが存在するようにしてあげましょう。

css
1input + label::before {
2  content: "";
3  position: absolute;
4  top: 1rem;
5  left: 1rem;
6  width: calc(100% - 2rem);
7  height: calc(100% - 2rem);
8  border: 2px solid transparent;
9  transition: border 1s;
10}
11
12input:checked + label::before {
13  border: 2px solid white;
14  transition: border 1s;
15}

投稿2021/06/08 08:08

int32_t

総合スコア20884

erajera

2021/06/08 08:16

なぜtransitionが効かないのか、が分かりました。ありがとうございました。

行動規範の内容に同意します

CSS
1
2input + label::before { /**/
3  content: "";
4  position: absolute;
5  top: 1rem;
6  left: 1rem;
7  width: calc(100% - 2rem);
8  height: calc(100% - 2rem);
9  border: 2px solid rgba(255, 255, 255, 0); /* */
10  transition: border 1s;
11}
12
13input:checked + label::before { /* */
14  border-color: #fff;
15}
16```**動くサンプル：**[https://jsfiddle.net/zL9n6pgx/](https://jsfiddle.net/zL9n6pgx/)