[Q&A] aタグのhover時border-bottomに対してtransitionが効かない

aタグのhover時border-bottomに対してtransitionが効かない

Q&A

Closed

HTML CSS

解決したいこと

aタグにtransitionでborder-bottomがゆっくりと消えるようにしたい。
また、なぜ今の記述でうまくいかないのか知りたい。

発生している問題・エラー

ディベロッパーツールで確認してみると、下線は消えるが明らかに変化まで3秒もかかっていなくtransitionが効いていないと思われる。
ブラウザはedgeです。

該当するソースコード

index.html
<div class="link">
    <a href="#">READ MORE</a>
</div>

index.scss
.link {
    text-align: center;
    a {
        color: #333333;
        display: inline-block;
        border-bottom: #333333 1px solid;
        transition: 3s;
        text-decoration: none;
        &:hover {
            border-bottom: none;
        }
    }
}

自分で試したこと

display: blockにはtransitionが効かないとあったのでinline-blockにしました。
また、hoverの中にcolor: redを追加したところ、colorは正常に3sかけて変化しました。

2Answer

@_y_s posted at 2022-02-04

        &:hover {
-            border-bottom: none;
+            border-bottom: transparent 1px solid;
        }

ではダメでしょうか？

0Like

@prismrism posted at 2022-02-05

display: blockにはtransitionが効かないとあったのでinline-blockにしました。

まずこちらですが、参照された資料を誤って解釈されていると思われます。
「display: block を指定した要素はあらゆるプロパティで transition が効かなくなる」ということではなく「display プロパティは transition の効果を得られないので、display: block -> display: none の切り替えでは徐々に透明になるアニメーションを実現できない」ということを意図した表現だったのではないかと推察します。

よって border を徐々に消したいという今回の要望と display プロパティはあまり関係ありません。

続いて本題の border-bottom: none; で意図したアニメーションにならない件です。

border-bototm は一括指定プロパティなので、１つだけ値を指定した場合は border-bottom-width border-bottom-style border-bottom-color の中から適するものへ指定値を設定し、残り２つを自動的に既定値にします。
none は border-bottom-style にだけ使える値なので、border-bottom: none; は以下の指定と同じ扱いになります。

&:hover {
    border-bottom-style: none;
    border-bottom-width: 0; // 本来の既定値は "medium" ですが、-style を "none" にすると 0 が設定されます。
    border-bottom-color: currentcolor;
}

先ほどのアニメーション可能なCSSプロパティの一覧には border-**-style は含まれていません。solid から none への切り替えはアニメーション無しで処理されるので、瞬時に表示が消えてしまいます。

意図する動作を満たすには border-bottom-color で透明色を指定するのが適切でしょう。

&:hover{
    border-bottom-color: transparent;
}
// or
&:hover{
    border-bottom-color: rgba(#333333, 0); // Sass/Scss ビルトインモジュールとしての書き方
}

See the Pen Untitled by Rs (@prismrism) on CodePen.

0Like

Comments

@kazukishimo0806
Questioner
詳細な回答ありがとうございます！
おかげでtransitionが効かない背景まで納得の理解ができました。

Are you sure you want to delete the question?