jquery - 转换类型导航栏

Question

不知道最好的解释方式所以我会在这里举个例子“http://www.worldinmylens.com/”

我正在尝试在过渡方面为旁边的导航栏复制相同的想法。我不确定如何正确地进行此操作

$(document).ready(function() {
  $('.handle').on('click', function() {
    $('.navbar').toggleClass('showing');
  });
});

body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 90%;
  margin: 20px auto;
  perspective: 500px;
}
.navbar {
  position: absolute;
  left: 0px;
  width: 180px;
  padding: 20px 10px;
  color: white;
  background: #333;
  opacity: 1;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  transform-origin: left center;
}
.handle {
  position: absolute;
  top: 200px;
  left: 40px;
  cursor: pointer;
}
.showing {
  opacity: 0;
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div class="container">
  <nav>
    <div class="navbar">
      <ul>
        <ol>Home</ol>
        <ol>About</ol>
        <ol>Contact</ol>
        <ol>Blog</ol>
        <ol>Support</ol>
      </ul>
    </div>
    <div class="handle">Click</div>
  </nav>
</div>

它有点像我想要的那样工作，但我认为它有一些缺陷，任何人都可以提供如何改进它并更好地工作的见解吗？

Answer 1

给你。

专业提示:如果您想复制在别处完成的某些操作，只需打开浏览器的开发人员工具，看看它是如何完成的。复制 CSS 过渡非常简单，只需查看过渡前后目标元素上应用的样式，然后将这些样式应用到您自己的元素上即可。

var menu = document.getElementById("menu");
var menuOpenButton = document.getElementById("menuOpenButton");
var menuCloseButton = document.getElementById("menuCloseButton");
var menuOpenedClassName = "opened";

menuOpenButton.addEventListener("click", function(event) {
  menu.className += " " + menuOpenedClassName;
}, false);

menuCloseButton.addEventListener("click", function(event) {
  menu.className = menu.className.replace(menuOpenedClassName, "");
}, false);

body {
  padding: 0;
  margin: 0;
  font-family: Helvetica, Arial, san-serif;
  font-weight: 300;
}
#menuOpenButton {
  float: left;
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f5f5f5;
}
#menu {
  position: fixed;
  z-index: 10;
  width: 200px;
  height: 100%;
  background-color: #000000;
  transform-origin: 0% 0%;
  transition-property: transform opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  opacity: 0;
  transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
#menu.opened {
  opacity: 1;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#menu ul li {
  color: #cccccc;
  line-height: 60px;
  text-align: center;
  border-bottom: 1px solid #212121;
}
#menuCloseButton {
  position: absolute;
  top: 0;
  left: 100%;
  padding: 0 20px;
  background-color: rgba(26, 26, 26, 0.9);
  line-height: 60px;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
}

<div id="menuOpenButton"><i class="fa fa-bars"></i> Menu</div>
<div id="menu">
  <div id="menuCloseButton"><i class="fa fa-times"></i> Close</div>
  <ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
  </ul>
</div>