jquery - jquery侧边栏动画切换弹出窗口

Question

再会！

我在左侧有一个侧边栏导航，当有人单击导航链接时，它会切换右侧的显示。但是我怎样才能显示细节并像这样为细节设置动画。
https://codepen.io/jericoborja20/pen/LYbaWVz

这是CSS：

.myDIV {
  margin-left: 200px; 
  font-size: 20px; 
  padding: 0px 10px;
}

.active {
  background-color: green;
  color: white;
}
    
.hide {
  display: block;
  position: absolute;
  width: 100%;
  top: 0; left: 0;
  bottom: 0; right: 0;
  transition: left 1s;
  overflow: hidden;
}

.show {
  display: block;
  position: absolute;
  width: 100%;
  top: 0; left: 100%;
  bottom: 0; right: 0;
  transition: left 1s;
  overflow: hidden;
}

这是我的javascript函数：

function myFunction() {
  var s = document.getElementById('myDIV');
  if (s.classList.contains('show')) {
    s.classList.remove("show");
    s.classList.add("hide");
  } else {
    s.classList.remove("show");
    s.classList.add("hide");
  }
}

这是我的 HTML 代码：

<div class="sidenav">
  <a href="#about" id="show" onclick="myFunction()">About</a>
</div>

<div class="myDIV">
  <h2>Sidebar Dropdown</h2>
  <p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p>
  <p>This sidebar is of full height (100%) and always shown.</p>
  <p>Some random text..</p>
</div>

标签： jquerycss