Jsfiddle示例：https://jsfiddle.net/herbert_hinterberger/mnw3mnso/6/
如果你点击导航点+＆＃39;有人知道如何让动画顺利开始吗？按钮。现在，以下主菜单点变为动画生涩。 （动画应该像再次折叠子菜单时一样平滑。）
<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
<div class="offcanvas-navi">
<ol>
<li class="primary-nav-points"><a href="#"><i class="fa fa-dashboard fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-user fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-th-large fa-3x"></i><span class="offcanvas-navi-text">Nav Point +</span><i class="fa fa-angle-right fa-2x"></i></a>
<ol class="sub-menu-l1 hide-sub-menu">
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></i></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></i></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></i></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
<li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
</ol>
</li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-lightbulb-o fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-dot-circle-o fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-users fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-shopping-cart fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-flash fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
<li class="primary-nav-points"><a href="#"><i class="fa fa-area-chart fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
</ol>
</div>
</div> <!--/.sidebar-offcanvas-->
答案 0 :(得分：0)
不要添加类来隐藏ol，而是尝试将其隐藏在css / jquery中并使用toggle隐藏。显示列表。
我已从html
中删除了hide-sub-menu类
$(".primary-nav-points > ol").hide();
$('.primary-nav-points').click(function () {
$(this).find("ol").toggle("500");
})
<强> DEMO
答案 1 :(得分：0)
通过回答问题How can I transition height: 0; to height: auto; using CSS?的答案，我能够创建目标动画。
https://jsfiddle.net/herbert_hinterberger/fdnhLfwo/1/
提供了更新的jsfiddle示例相关的变化是：
$('.primary-nav-points').click(function () {
$('ol', this).toggleClass('activate-sub-menu');
})
和
ol.sub-menu-l1 {
max-height: 0px;
transition: max-height 0.5s ease-out;
overflow: hidden;
}
ol.activate-sub-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
感谢所有试图支持我的人。