CSSでvisibilityとopacityを組み合わせたトランジション

visibility + opacityパターン

よくある間違いは、要素を非表示にするためにopacity: 0だけを使用することです。問題：opacity: 0の要素は目に見えませんが、スペースを占有しクリックイベントを受け取ります。解決策はopacityとvisibilityを組み合わせることです。

問題

/* 悪い例: 要素は目に見えないがクリック可能 */
.tooltip {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.trigger:hover .tooltip {
  opacity: 1;
}

解決策

.tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease,
              visibility 0.3s;
}

.trigger:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

visibilityトランジションの仕組み

visibilityプロパティは数値のように補間されません。ステップ関数を使用します：

• 表示（hidden → visible）: visibilityはトランジションの開始時にvisibleに切り替わり、opacityフェードインが見えるようにする
• 非表示（visible → hidden）: visibilityはトランジションの終了時にhiddenに切り替わり、opacityフェードアウト完了後に非表示になる

この動作はまさに望ましいものです：表示時に要素が即座にインタラクティブ（visible）になり、フェードアウト完了後にのみ非インタラクティブ（hidden）になります。

代替: pointer-events

別のアプローチでは、pointer-events: noneを使用して見えない要素でのクリックを防ぎます：

.tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.trigger:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

これは要素をアクセシビリティツリーに保持し（スクリーンリーダーがまだ読み取る可能性あり）、visibility: hiddenは視覚表示とアクセシビリティの両方から削除します。