Off-Canvas 菜单动画不工作

Question

我有一个用 Bootstrap 制作的 3 列模板，我正在尝试正确设置动画。我确定我遗漏了一些简单的东西，但无法弄清楚并且可以使用一些反馈。我只是想让左边的 canvas 菜单通过滑入来设置动画。我试过弄乱每个 div 并设置它的动画，但它仍然不会设置动画。我尝试在线搜索，但找不到任何可能对我有帮助的东西。我感谢任何建议。 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;
}

JS

/* 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";


}

Answer 1

在将元素转入或转出时不要使用 "display: none;"。您所做的只是显示/隐藏某些内容，而不是在样式之间进行平滑过渡。

如果你想动画化，那么请在你想要过渡的元素上添加 CSS class 而不是在 JS 中更改这些元素的样式。

例如，从左边滑入：

   #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);
   }

Off-Canvas 菜单动画不工作

Off-Canvas Menu Animations Not Working

css

sidebar

css-animations

twitter-bootstrap

off-canvas-menu