How to add css slide transition to sidenav menu?-CodePudding

I have a sidenav menu that appears and disappears when the button is clicked. Everything works fine, but I can't understand why the transition to css is not working. As you can see in the example below the menu appears and disappears sideways, but I would like to add a transition in the css. What am I doing wrong ?

Sorry for mistakes, I'm new and learning. I appreciate any help. Thanks.

var menu = document.querySelector(".mob_menu_button");

function mobile_menu(e) {
  e.stopPropagation();
  var x = document.getElementById("mts_mobile_menu");
  if (!x.classList.contains("active")) {
    x.classList.add("active");
    x.classList.remove("hide");
    menu.innerHTML = "<span>Close Menu<span>";
  } else {
    x.classList.add("hide");
    menu.innerHTML = "<span>Open menu</span>";
  }
}

document.addEventListener("click", function(e) {
  var x = document.getElementById("mts_mobile_menu");
  if (e.target.id !== "mts_mobile_menu" && x.classList.contains("active")) {
    x.classList.add("hide");
    x.classList.remove("active");
    menu.innerHTML = "<span>Open menu</span>";
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*Items menu*/

.user_menu {
  display: flex;
  flex-direction: column;
}


/*Menu header info*/

.display.name {
  font-size: 15px;
  font-weight: 500;
  color: #303238;
}

.display.mail {
  font-size: 13px;
  color: #3d5afe;
}

hr.solid {
  border-top: 1px solid #e0e0e0;
  margin: 10px 0px 10px 0px;
}


/*Text Link css*/

.user_menu.item>a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #75777d;
}

.user_menu.item:hover>a {
  color: #2e323a;
}


/*Icon Button Toggle Menu*/

.mob_menu_button {
  display: flex;
  align-content: flex-end;
  justify-content: center;
  align-items: flex-end;
  width: 20%;
  background: #282c33!important;
  font-weight: 500!important;
  position: absolute;
  top: 20px;
  right: 20px;
}

.icn_button {
  margin: 0;
  font-size: 14px;
}

.icn_button:before {
  margin: 0;
}

.icn_button:after {
  margin: 0;
}


/*Icon Items Menu*/

.icn_menu:before,
.icon_menu:after {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
}

.icn_menu {
  margin-right: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}


/* User Menu For header website */

.mts_mob_container {
  display: flex;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  background: #000000d6;
}

.mts_sidenav_box {
  display: block;
  width: 100%;
}

.mts_sidenav_content {
  display: none;
  padding: 20px;
  background-color: #fff;
  min-width: 160px;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 999;
  position: relative;
  width: 75%;
  height: 100vh;
}

.mts_sidenav_content.active {
  display: block!important;
  left: 0px;
}

.mts_sidenav_content.hide {
  left: -100%;
}

<button onclick="mobile_menu(event)" >Open menu</button>

<div >
  <div id="mts_mobile_menu" >
    <div >

      <div >
        <span >Ciao [display_name]</span>
        <span >[display_email]</span>
      </div>

      <hr  />

      <div >
        <a href="/account">
          <i ></i>
          <span >Dashboard</span>
        </a>
      </div>

      <div >
        <a href="ordini">
          <i ></i>
          <span >I miei ordini</span>
        </a>
      </div>

      <div >
        <a href="libreria">
          <i ></i>
          <span >Downloads</span>
        </a>
      </div>

      <div >
        <a href="impostazioni">
          <i ></i>
          <span >Impostazioni</span>
        </a>
      </div>

      <div >
        <a href="wp-login.php?action=logout">
          <i ></i>
          <span >Logout</span>
        </a>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

It looks like you are toggling the element via an active class that uses display: none to display: block which you can't animate on it's own.

Instead of display, you could use transform: translateX and opacity to slide and fade in the menu. You'll also want to set pointer events to prevent accidental clicks while it's "hidden". And you might need overflow: hidden on the parent/body.

.your-class {
    transition: all 0.5s ease;
    transform: translateX(300px);
    opacity: 0;
    pointer-events: none;
}

.your-class.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}

CodePudding user response：

I found a solution: I changed the Js and Css a bit for this, I leave the working code for anyone who has the same problem.

var menu = document.querySelector(".mob_menu_button");
      function mobile_menu(e) {
        e.stopPropagation();
        var x = document.getElementById("mts_mobile_menu");
        var y = document.getElementById("overlayx");
        
        // For var x
        if (!x.classList.contains("active")) {
          x.classList.toggle("active");
          menu.innerHTML = "<span>Close Menu</span>";
        } else {
          x.classList.remove("active");
          menu.innerHTML = "<span>Open Menu</span>";
        }
      // For var y
      if (!y.classList.contains("over")) {
          y.classList.toggle("over");
        } else {
          y.classList.remove("over");
        }
      }
      
     // Permette la chiusura del menu cliccando fuori dall'area
      document.addEventListener("click", function (e) {
        var x = document.getElementById("mts_mobile_menu");
        var y = document.getElementById("overlayx");
        
        // For var x
        if (e.target.id !== "mts_mobile_menu" && x.classList.contains("active")) {
          x.classList.toggle("active");
          menu.innerHTML = "<span>Open Menu</span>";
        }
        // For var y
        if (e.target.id !== "mts_mobile_menu" && y.classList.contains("over")) {
          y.classList.toggle("over");
        }
        
      });

      /*Items menu*/
      .user_menu {
        display: flex;
        flex-direction: column;
      }

      /*Menu header info*/
      .display.name {
        font-size: 15px;
        font-weight: 500;
        color: #303238;
      }

      .display.mail {
        font-size: 13px;
        color: #3d5afe;
      }

      hr.solid {
        border-top: 1px solid #e0e0e0;
        margin: 10px 0px 10px 0px;
      }

      /*Text Link css*/
      .user_menu.item > a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 8px 0;
        font-size: 13px;
        color: #75777d;
      }

      .user_menu.item:hover > a {
        color: #2e323a;
      }

      /*Icon Button Toggle Menu*/
    button.mob_menu_button {
       display: flex;
       align-content: center;
       justify-content: center;
       align-items: center;
       width: 20%;
       background: #282c33!important;
       color: #fff;
       font-weight: 500!important;
       top: 40px;
       right: 40px;
       position: absolute;
      }

      .mob_menu_button > span {
      z-index: 1000;
      }

      /*Icon Items Menu*/
      .icn_menu:before,
      .icon_menu:after {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
      }

      .icn_menu {
        margin-right: 10px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
      }

      /* User Menu For header website */
      .mts_mob_container {
        display: flex;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        background: #000000d6;
        opacity: 0;
        transition: 0.3s;
      }
      
       .mts_mob_container.over {
           opacity: 1;
       }
      
     .mts_sidenav_box {
        display: block;
        width: 100%;
      }

    .mts_sidenav_content {
        left: -100%;
        padding: 20px;
        background-color: #fff;
        min-width: 160px;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 999;
        position: relative;
        width: 75%;
        height: 100vh;
        transition: .3s;
      }

    .mts_sidenav_content.active {
    left: 0;
   }

    .mts_sidenav_content.hide {
    left: -100%;
      }

<button onclick="mobile_menu(event)" ><span >Open Menu</span></button>

      <div id="overlayx" >
         <div id="mts_mobile_menu" > 
         
          <div >

            <div >
              <span >Ciao [display_name]</span>
              <span >[display_email]</span>
            </div>

            <hr  />

            <div >
              <a href="/account">
                <i ></i>
                <span >Dashboard</span>
              </a>
            </div>

            <div >
              <a href="ordini">
                <i ></i>
                <span >I miei ordini</span>
              </a>
            </div>

            <div >
              <a href="libreria">
                <i ></i>
                <span >Downloads</span>
              </a>
            </div>

            <div >
              <a href="impostazioni">
                <i ></i>
                <span >Impostazioni</span>
              </a>
            </div>

            <div >
              <a href="wp-login.php?action=logout">
                <i ></i>
                <span >Logout</span>
              </a>
            </div>
          </div>
        </div>
      </div>