CSS transitionとjQueryで開閉メニューを作りたい

Question

前提・実現したいこと

CSS transitionとjQueryで開閉メニューを作りたい

発生している問題・エラーメッセージ

メニューを開くボタンを押すと左から右へtransition効果のメニューが出てくるのですが、
出てきたコンテンツを押して一度メニューを非表示にして、
もう一度メニューを開くボタンを押してもtransition効果が無効な状態で表示されます

有効な状態で繰り返すにはどうしたらいいのでしょうか

該当のソースコード

<input id="m" type="button" value="メニューを開く">

<div id="menu" style="position:fixed;z-index:1" class="boxp">
<div style="float:left;width:33%;height:100%;background-color:red" onclick="document.getElementById('menu').classList.remove('on');menu.style.display='none';">コンテンツ1</div>
<div style="float:left;width:33%;height:100%;background-color:green" onclick="document.getElementById('menu').classList.remove('on');menu.style.display='none';">コンテンツ2</div>
<div style="float:left;width:33%;height:100%;background-color:blue" onclick="document.getElementById('menu').classList.remove('on');menu.style.display='none';">コンテンツ3</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
    $(document).ready(function () {
$("#m").on("click", function(){

if(!document.getElementById("menu").classList.contains("on")){
$("#menu").toggleClass("on");
}else{
$("#menu").removeClass("on");
}
menu.style.display="";

});
    })
</script>

<style>
.boxp{
opacity: 0;
width:0%;
height:70%;
bottom:0%;
transition: 1s;
}
.boxp.on{
opacity: 1;
width:100%;
height:70%;
background-color:black;
bottom:0%;
}
</style>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

アニメーションしないのは、
メニューのonclick=""内でmenu.style.display='none'をしているからです。
display='none'はOn/Offの2つの状態しかないのでアニメーションはしません。
これを削除すればアニメーションするようになります。

---

質問内容とは外れますが、
スクリプトをボタンは別箇所、メニューはインラインというように分けるのは管理上好ましくないです。
同じ個所に統一して記述したほうが管理しやすいですよね。
また、どちらも同じ開閉処理なのでまとめて記述できます。

あと、Classの存在をチェックしていますが、toggleClass自体が存在チェックしてますので不要ですね。

CSSもインラインと混在してますが、これもCSSファイルにまとめて、HTMLはなるべくシンプルにした方がいいでしょう。

<input id="m" type="button" value="メニューを開く">

<div id="menu" class="boxp">
  <div>コンテンツ1</div>
  <div>コンテンツ2</div>
  <div>コンテンツ3</div>
</div>

.boxp{
  opacity: 0;
  width: 0%;
  height: 70%;
  bottom: 0%;
  transition: 1s;
}
.boxp.on{
  opacity: 1;
  width: 100%;
  height: 70%;
  background-color: black;
  bottom: 0%;
}
#menu {
  position: fixed;
  z-index: 1;
}
#menu>div {
  float:left ;
  width: 33%;
  height: 100%;
}
#menu>div:nth-child(1) {
  background-color:red;
}
#menu>div:nth-child(2) {
  background-color:green;
}
#menu>div:nth-child(3) {
  background-color:blue;
}

$(document).ready(function () {
  $("#m, #menu").on("click", function(){ 
      $("#menu").toggleClass("on");
  });
})

Comments

[退会済みユーザー]

返答ありがとうございます。
無事に動かす事ができました。
わざわざ書き方もご指南いただきありがとうございました！