[SOLVED] Off-Canvas Menu Animations Not Working

Off-Canvas Menu Animations Not Working

I have a 3 column template made with Bootstrap that I am trying to get to animate properly. I'm sure I'm missing something simple but can't figure it out and could use some feedback. I am just trying to get the left off-canvas menu to animate by sliding in. I have tried messing with each div and animating that as well but it still won't animate. I tried searching online but can't find anything that could possibly help me. I appreciate any suggestions. HTML

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="css/pwrpg.css">

    <title>Hello, world!</title>
  </head>
  <body>

<header class="header-container bg-success">header<a href="javascript:void(0)" onclick="openNav()">open</a><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a></header>
<div class="wrapper">
  <section class="content">
    <div class="columns">
      <main class="main" id="main">Content: Flexible width

        <div class="box"></div>

        </main>
      <aside class="sidebar-first" id="sidebar-first">Sidebar first: Fixed width<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a></aside>
      <aside class="sidebar-second">Sidebar second: Fixed width</aside>
    </div>
  </section>
</div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
      <script src="js/pwrpg.js"></script>


  </body>
</html>

CSS

/* Layout Containers */

.header-container{position: relative;height:50px;}
body{
  margin: 0;
} 
.wrapper{
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.content {
  display: flex;
  flex: 1;
  background: #999;
  color: #000; 
    transition: all 0.3s ease-in-out;
}
.columns{
  display: flex;
  flex:1;
}
.main{
  flex: 1;
  order: 2;
  background: #eee;
  transition: margin-left .5s;
  padding: 20px;
}
.sidebar-first{
  width: 260px;
  background: #ccc;
  order: 1;
  transition: all .25s ease-out;
}
.sidebar-second{ 
  width: 260px;
  order: 3;
  background: #ddd;
}

.sidebar-first .closebtn {

    font-size: 36px;

}


@media (max-width: 991.99px) {

    .sidebar-first, .sidebar-second {display:none;transition: all .25s ease-out;} 

      .main {
    position: relative;
    transition: all .25s ease-out;
  }

}


.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.box:hover {
  background-color: green;
  cursor: pointer;
}

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
    document.getElementById("sidebar-first").style.width = "260px";
    document.getElementById("sidebar-first").style.display = "block";

}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("sidebar-first").style.width = "260px";
    document.getElementById("sidebar-first").style.display = "none";


}

Solution

Don't use "display: none;" when transitioning an element in or out. All you're doing is showing / hiding something rather than having a smooth transition between styles.

If you want to animate things, do so buy adding a CSS class onto the elements you want to transition rather than changing the styles of those elements in JS.

For example, to slide something in from the left:

   #my-sidebar {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: all 0.4s ease;
   }
   #my-sidebar.transition-in {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
   }