javascript - 创建一个从左到中的动画

Question

我需要创建一个动画，使菜单从屏幕左侧出现。该动画应在单击按钮时启动。菜单内容应恢复主页宽度的 55%。

JSFiddle Demo

在上一个链接中，您可以使用菜单和向左移动的按钮。在开始时，菜单(带有“链接”元素)应该被隐藏，按钮 .glyhicon 应该在页面的最左边。
单击此按钮时，菜单和按钮应向右移动并恢复主页的 55%。
问题是我不知道该怎么做。 (我设法通过更改结构来移动菜单，但无法移动按钮。)这是我的 HTML 代码

<div id="left-menu">
    <div id="map-menu" class="test">
      <nav class="menu_content">
        <ul>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
        </ul>
      </nav>
    </div>
    <div id="icon-menu" class="test">
      <button id="button_menu" class="js-menu menu" type="button">
        <span class="glyphicon glyphicon-map-marker"></span>
      </button>
    </div>
  </div>

CSS:

#left-menu {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#map-menu, #icon-menu {
  display: inline-block;
  vertical-align: middle;
}

.menu {
  background: 0;
  float: left;
  margin: 2rem;
  height: 2.7rem;
  width: 3.5rem;
  z-index: 2;
  outline: 0;
  padding: 0;
  border: 0;
}

.menu_content{
  width: 60%;
  height: 100%;
  background: #eaeaea;
  position: fixed;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  padding-top: 6.2rem;
  z-index: 1;
}

.menu-open nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.menu_content ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.menu_content ul li {
  padding: 20px 5px;
  font-size: 2rem;
}
.menu_content ul li:hover {
  background: blue;
}

javascript:

var isActive = false;

$('.js-menu').on('click', function() {
    if (isActive) {
        $(this).removeClass('active');
        $('#left_menu').removeClass('menu-open');
    /*$('#button_menu').removeClass('move-right');
    $('#button_menu').addClass('move-left');*/
    } else {
        $(this).addClass('active');
        $('#left_menu').addClass('menu-open');
    /*$('#button_menu').removeClass('move-left');
    $('#button_menu').addClass('move-right');*/
    }

    isActive = !isActive;
});

你能帮我改编或重做动画吗？

Answer 1

这是一个没有任何 javascript 的纯 CSS 解决方案，通过使用带有 display:none 的隐藏复选框的 :checked 状态，label 该复选框应位于 #left-menu 元素之外，因此可以使用 ~ 对其进行定位:

JS Fiddle 1

#button_menu {
  display: none;
}
.glyphicon {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
  background-size: 100%;
  position: fixed;
  left: 5px;
  top: 50%;
  transition: all 1s;
  cursor: pointer;
}
#left-menu {
  background-color: orange;
  position: fixed;
  left: -100%;
  width: 55%;
  top: 50%;
  transition: all 1s;
}
#button_menu:checked + .glyphicon {
  left: 55%;
  transition: all 1s;
}
#button_menu:checked ~ #left-menu {
  left: 0;
  transition: all 1s;
}
.menu_content ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.menu_content ul li {
  padding: 20px 5px;
  font-size: 2rem;
}
.menu_content ul li:hover {
  background: blue;
}

<input type="checkbox" id="button_menu" class="js-menu">
<label for="button_menu" class="glyphicon"></label>
<div id="left-menu">
  <div id="map-menu" class="test">
    <nav class="menu_content">
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
      </ul>
    </nav>
  </div>
</div>

---

这是一个简单的 jQuery 解决方案，基本上我们有一个变量作为触发标志 toggleFlag，如果它的值为 true left值为 0，而如果触发标志值为 false，则 left 值为 -55% -< em>这是菜单宽度，正如 op 所说的那样，它占据了屏幕的 55%-，然后我们为左侧的 .left-menu 依赖设置动画值，我们需要否定触发标志的值。

JS Fiddle 2

var menuIcon = $('.glyphicon'),
  leftMenu = $('#left-menu'),
  toggleFlag = true;

menuIcon.on('click', function() {
  var leftVal = (toggleFlag) ? '0' : '-55%';
  $('#left-menu').animate({'left': leftVal }, 700);
  toggleFlag = !toggleFlag;
});

.glyphicon {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
  background-size: 100%;
  position: absolute;
  right: -45px;
  top: 5px;
  cursor: pointer;
}
#left-menu {
  background-color: orange;
  position: fixed;
  left: -55%;
  width: 55%;
  top: 50%;
}
.slideIt {
  color: red;
}
.menu_content ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.menu_content ul li {
  padding: 20px 5px;
  font-size: 2rem;
}
.menu_content ul li:hover {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="left-menu">
  <span class="glyphicon"></span>
  <div id="map-menu" class="test">
    <nav class="menu_content">
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
      </ul>
    </nav>
  </div>
</div>