title: Off-Canvas Menu Animations Not Working
body: <p>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</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;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"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/pwrpg.css"&gt;
  
      &lt;title&gt;Hello, world!&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;header class="header-container bg-success"&gt;header&lt;a href="javascript:void(0)" onclick="openNav()"&gt;open&lt;/a&gt;&lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;Close&lt;/a&gt;&lt;/header&gt;
  &lt;div class="wrapper"&gt;
    &lt;section class="content"&gt;
      &lt;div class="columns"&gt;
        &lt;main class="main" id="main"&gt;Content: Flexible width
  
          &lt;div class="box"&gt;&lt;/div&gt;
  
          &lt;/main&gt;
        &lt;aside class="sidebar-first" id="sidebar-first"&gt;Sidebar first: Fixed width&lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;Close&lt;/a&gt;&lt;/aside&gt;
        &lt;aside class="sidebar-second"&gt;Sidebar second: Fixed width&lt;/aside&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  
  
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;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"&gt;&lt;/script&gt;
        &lt;script src="js/pwrpg.js"&gt;&lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>/* 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";
  
  
  }
  </code></pre>