vue.jsのtransactionでハマった
<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;
を指定していることが問題。
これを削除したらうまく変化した。