生涩的展开子菜单动画

Question

Jsfiddle 示例：https://jsfiddle.net/herbert_hinterberger/mnw3mnso/6/

如果您单击“导航点 +”按钮，是否有人知道如何使动画开始流畅。现在，以下主菜单点变成了动画生涩。 （动画应该和再次折叠子菜单时一样流畅。）

<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-->

Answer 1

不要添加类来隐藏ol，而是尝试从 css/jquery 中隐藏它并使用 toggle 来隐藏。显示列表。

我已经从 html 中删除了 hide-sub-menu 类

 $(".primary-nav-points > ol").hide();
    $('.primary-nav-points').click(function () {
        $(this).find("ol").toggle("500");
    })

DEMO

Answer 2

通过对问题How can I transition height: 0; to height: auto; using CSS? 的回答，我能够创建目标动画。

更新的 jsfiddle 示例可在 https://jsfiddle.net/herbert_hinterberger/fdnhLfwo/1/ 获得

相关的变化是：

$('.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;
}

感谢所有试图支持我的人。