#74 下からにょきっとスライドアップするナビゲーション

下からにょきっとスライドアップするナビゲーションを作ってみた。
jQueryのslideUP() slideDown()は上からなんだよね…

やっていることは、下から出したい。
初期状態は、ナビゲーションは画面の下に隠れている状態
つまり、CSSの　transform: translateY(100%);　の状態ということ。
そしてボタンを押したら、
元の場所に戻したい　transform: translateY(0%);　の状態　それだけ

CSSはこんな感じ

#menu {
    background: #ffffd1;
  transform: translateY(100%);
}
#menu.slide_up {
  animation:slideUp .8s ease-in-out forwards;
}
#menu.slide_down {
  animation:slideDown .8s ease-in-out forwards;
}
#btn_menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
@keyframes slideUp {
  0% {
      transform: translateY(100%);/* 要素を下の枠外に移動*/
  }
  100% {
      transform: translateY(0%);/* 要素を元の位置に移動*/
  }
}
@keyframes slideDown {
  0% {
      transform: translateY(0%);/* 要素を元の位置に移動*/
  }
  100% {
      transform: translateY(100%);/* 要素を下の枠外に移動*/
  }
}

JSはこんな感じ　ES6にしてみた。　クラスの付け外しだけ

const btn = document.getElementById('btn_menu'),
    menu = document.getElementById('menu');

btn.addEventListener('click', () => {
  if(!menu.classList.contains('slide_up')){
    menu.classList.remove('slide_down');
    menu.classList.add('slide_up');
  } else {
    menu.classList.remove('slide_up');
    menu.classList.add('slide_down');
  }
});

やればできた。

参考：
https://coco-factory.jp/ugokuweb/move02/8-5/

ヘッダー画像は、葛飾北斎の冨嶽三十六景シリーズの　山下白雨
白雨は夕立のこと。右下の雷っぽいところ。
https://bunka.nii.ac.jp/heritages/detail/174914