“菜单”到“关闭”文本过渡

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>