javascript - "Menu"到 "Close"文本转换

Question

我遇到了一个简洁的菜单过渡效果，他们将“菜单”文本替换为“关闭”文本，我在这个网站 - simple.com 上找到了它。这发生在手机上。 此外，我有上面效果的 GIF。 我正在尝试复制它们所具有的完全相同的效果。

有人知道我该怎么做吗？我想使用 HTML、CSS 和 Javascript/或 jQuery 来做到这一点。

我没有任何代码可以显示。由于缺乏 Javascript 和 jQuery 方面的知识。因此，我什至不知道如何描述正在发生的事情，以及我正在寻找它的效果/转变。

Answer 1

鉴于您知道该网站，并且您想要相同的效果。您可以简单地检查元素，复制它的 html 和它的 css。然后观察单击该元素时发生的情况，以了解要应用的 JS。

这实际上是从他们的源代码中复制粘贴的，如果你问我的话，非常简单 (.com):)。

$(function() {
  $('.mobile-toggle').on('click', function() {
    $(this).toggleClass('active');
  });
});

.mobile-toggle {
  background: #0d97ff;
  border: 2px solid #0d97ff;
  color: #ffffff;
  display: inline-block;
  float: right;
  font-size: 14px;
  font-family: "CalibreBold", helvetica, sans-serif;
  height: 34px;
  letter-spacing: 1.2px;
  line-height: 30px;
  overflow: hidden;
  padding: 0 25px;
  position: relative;
  width: 85px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle.active {
  background: #fff;
  color: #0d97ff;
  -webkit-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle .toggle-labels {
  display: block;
  position: absolute;
  height: 68px;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle.active .toggle-labels {
  -webkit-transform: translateY(-34px);
  -moz-transform: translateY(-34px);
  -ms-transform: translateY(-34px);
  transform: translateY(-34px);
  -webkit-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle .toggle-labels .menu {
  display: block;
  height: 34px;
  left: 0;
  top: 0;
  width: 100%;
}

.mobile-toggle .toggle-labels .close {
  display: block;
  height: 34px;
  left: 0;
  top: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="mobile-toggle">
  <span class="toggle-labels">
		<span class="menu">Menu</span>
    <span class="close">Close</span>
  </span>
</a>