动画移动第一滴导航

Question

编辑，添加了一个CODEPEN！

http://codepen.io/anon/pen/LcDle/

所以我有这个甜蜜的菜单，使用css和断点来改变移动和桌面之间的形式。然后我使用一块带有toggleClass的javascrip来交换类。如何在不使用jQueryUI的情况下为此切换设置动画？我是JS的一个新手，所以请举例说明如果可能的话。谢谢你们

使用Javascript：

$(document).ready(function(){
  $("#pull").on('click', function(e) {
    e.preventDefault();
    $(".navigation--menu-responsive").toggleClass("navigation--menu-toggle");
  });
});

HTML标记：

<nav class="{% if include.menu == 'only' %}navigation--menu--only{% else %}navigation{% endif %}">
<ul class="navigation--menu">
<li><a href="{{ site.baseurl }}/" class="logo-wrapper"><i class="icon-logo logo" ></i></a></li>
<li><a href="#" class="navigation--button" id="pull"><i class="icon-menu menu"></i></a></li>

<li><a href="{{ site.baseurl }}/projects" class="navigation--menu-responsive {% if page.active == 'projects' %}active{% endif %}" >Projects</a></li>
<li><a href="{{ site.baseurl }}/journal" class="navigation--menu-responsive {% if page.active == 'journal' %}active{% endif %}" >Journal</a></li>
<li><a href="{{ site.baseurl }}/" class="navigation--menu-responsive {% if page.active == 'about' %}active{% endif %}" >About me</a></li>
<li><a href="{{ site.baseurl }}/contact" class="navigation--menu-responsive {% if page.active == 'contact' %}active{% endif %}" >Contact</a></li>
</ul>
</nav>

和SASS：

a.navigation--menu-toggle {
display:block;
@include media($breakpoint-small) {
display:inline-block;
}
}
.navigation--menu-responsive {
display:none;
@include media ($breakpoint-small) {
display:inline-block;
}
}