生澀展開子菜單的動畫

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

來源

2015-11-02 HH.

而不是添加類隱藏ol的，請嘗試從CSS/jQuery的隱藏它，並使用toggle來hide.show列表。

我已經從HTML

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

DEMO

來源

2015-11-02 05:56:48 Sowmya

感謝您的建議，但動畫仍然不是它應該的。動畫應該像再次摺疊子菜單時一樣平滑。（在我的例子中） –

@HH。我沒有使用bootstrap等，但看看[A Pen By Razvan Spatariu]（http://codepen.io/RazvanDH/pen/WbmNLb）顯示了沒有抖動的相同動畫。對於我的使用，我使動畫更快（100ms），並添加了'border：0px solid transparent'來規定'標籤跨度，標籤跨度：之前，標籤跨度：之後'以平滑線條。 –

刪除hide-sub-menu類通過回答以下的問題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; 
}

感謝所有誰試圖支持我。

來源

2015-11-02 16:47:00

生澀展開子菜單的動畫

回答

相關問題