0

Jsfiddle example: https://jsfiddle.net/herbert_hinterberger/mnw3mnso/6/

Does somebody know how I can get the animation smooth that starts if you click on the 'Nav point +' button. Right now the following main menu points become animated jerky. (The animation should be as smooth as it is when collapsing the sub menu again.)

<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-->
HH.
  • 197
  • 3
  • 17

2 Answers2

0

Instead of adding class to hide the ol, try hiding it from css/jquery and use toggle to hide.show the list.

I have removed the hide-sub-menu class from html

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

DEMO

Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • Thanks for your suggest, but the animation is still not as it should be. The animation should be as smooth as it is when collapsing the sub menu again. (in my example) – HH. Nov 02 '15 at 09:42
  • @HH. I am not using bootstrap and such, but do have a look at [A Pen By Razvan Spatariu](http://codepen.io/RazvanDH/pen/WbmNLb) showing the same animation(s) without jitter. For my use I made the anim faster (100ms) and added `border: 0px solid transparent` to rule `label span,label span:before,label span:after` to smoothen the lines. – Rene van der Lende Nov 02 '15 at 13:02
0

By following the answer to the question How can I transition height: 0; to height: auto; using CSS? I was able to create the targeted animation.

An updated jsfiddle example is available at https://jsfiddle.net/herbert_hinterberger/fdnhLfwo/1/

The relevant changes were: 

$('.primary-nav-points').click(function () {
    $('ol', this).toggleClass('activate-sub-menu');
})

and 

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

Thanks to all who tried to support me.

Community
  • 1
  • 1
HH.
  • 197
  • 3
  • 17