Javascriptでのフェードイン、フェードアウトの記述方法を教えていただきたいです。

Question

ボタンをクリックをすると、
[nav]のスタイルが[block ⇔ none]が変更される動きを記述しているのですが、
このスタイル変更の際にフェードイン、フェードアウトの動きをいれたいです。
下記にどういったコードを追記したらいいのでしょうか？
また、このコードだけではできないようでしたら、**教えていただきたいです。

animeteを追記しました。
フェードインは正常に動きました。
しかし、フェードアウトがされず、[block → none]に切り替わるだけです。
何が問題でしょうか？

const closebutton = document.querySelector('#closeButton');
const nav = document.querySelector('nav');

menubutton.addEventListener('click', () => {
    nav.style.display = 'block';
    nav.animate([{opacity: '0'}, {opacity: '1'}], 500)
});
closebutton.addEventListener('click', () => {
    nav.style.display = 'none';
    nav.animate([{opacity: '1'}, {opacity: '0'}], 500)
});

Comments

[m.ts10806]

調べても何も出ませんか？

[m.ts10806]

あとHamlはどのような関係があるのでしょうか？

[bowwow]

調べてみて
nav.animate([{opacity: '0'}, {opacity: '1'}], 500)
を記述すると[none → block]の際にフェードインさせることに成功しました。
しかし、次にフェードアウトさせる為、
nav.animate([{opacity: '1'}, {opacity: '0'}], 500)と反対の動きを入れたのですが、
フェードアウトせずにただ[block → none]に切り替わります。
何が問題でしょうか？

hamlはhtmlのつもりでした。すみません。
関係ないです。

[yambejp]

ソースはテキストではってください
fadeOutしたあと空いたスペースをどうするか検討が必要です

[m.ts10806]

質問は編集できますので適宜調整してください。
質問本文にないことは他者には伝わりませんので。

[bowwow]

まだ、使い慣れていないものですみません。
次からそうさせていただきます。

フェードアウト後の空いたスペースとはどういうことですか？
私の認識ではフェードアウトさせて、特になにもしないつもりです。

[m.ts10806]

質問は編集できますのでいつ来るかわからない次回に回すのではなく、今回から対応願います。

→行き違いになりました。

[bowwow]

yambejpさん、m.ts10806さん
ご指摘ありがとうございます。
編集いたしましたので、見ていただけないでしょうか？
お願いします。

Answer 1

先に display: none にしてしまうと非表示になりアニメーションしようがないので、アニメーションが終わってから display: none にします。

closebutton.addEventListener('click', async () => {
    await nav.animate([{opacity: '1'}, {opacity: '0'}], 500).finished;
    nav.style.display = 'none';
});

Comments

[bowwow]

思っていた通り動きました！！
ありがとうございます！！

Answer 2

<style>
nav:not(.active){
  animation: fadeout 2s;
  animation-fill-mode:forwards;
}
nav{
  background-Color:gray;height:4em;
  opacity:0;
}
nav.view{
  opacity:1;
}
nav.active{
  animation: fadein 2s;
}
@keyframes fadein{
  from{ opacity: 0;}
  to{ opacity: 1; }
}
@keyframes fadeout{
  to{ opacity: 0;}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const nav=document.querySelector('nav');
  const menu=document.querySelector('#menu');
  const close=document.querySelector('#close');
  menu.addEventListener('click',()=>{
    nav.classList.add('active');
    nav.classList.add('view');
  });
  close.addEventListener('click',()=>{
    nav.classList.remove('active');
  });
});
</script>
<input type="button" value="menu" id="menu">
<input type="button" value="close" id="close">
<nav>nav</nav>

Answer 3

このコードだけではできないようでしたら、

jQuery 使ってもええんやったら、

.fadeIn()
.fadeOut()

でいけまっせ。