<div id=”overlay”></div>
<button>Toggle</button>
<style>
#overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  overflow: hidden;
}
.fader-enter-active, .fader-leave-active {
  transition: opacity 1s ease;
}
.fader-enter-from, .fader-leave-to {
  opacity: 0;
}
</style>

だとうまく動作しない。
いきなり透明度が変化してまったくトランジションにならない。

#overlayのStyleに
opacity: 1;
を指定していることが問題。
これを削除したらうまく変化した。