opacity: 0; と visibility: hidden;のJavaScriptにおける微妙な違い

opacity: 0;とvisibility: hidden;ですが双方共に下記の動作をします。
・見た目上は見えない
・display: none;とは異なり、幅/高さは保持しており要素自体が存在している。

ただし、JavaScriptのイベントが発火するかしないかという違いがあります。

opacity: 0;

イベントが発火します。

visibility: hidden;

イベントが発火しません。

サンプル

まとめ

稀にこの2つの特性を活かした実装が必要になるケースがあるので上手く使い分けると良いかもしれません。