側面菜單欄的過渡效果

Question

我正在嘗試獲取固定側菜單欄，單擊該菜單欄即可打開。

它按預期工作，現在我需要的是在擴展/關閉時應用平滑過渡效果。 而優化jQuery代碼，我當前的代碼非常手工。

這是使用的腳本

if ( $( ".sidebar" ).hasClass( "sidebar_collapsed" ) ) { 
    $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" ).hide(); 
}

$( ".sidebar_list > li > a" ).click(function() {
  $(".sidebar").removeClass("sidebar_collapsed");
  $( ".sidebar > ul > li" ).removeClass("active");
  $(this).parent().addClass("active");
  $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" ).show();
});

$( ".close_sidebar, .home" ).click(function() {
  $(this).addClass("active");
  $(".sidebar").addClass("sidebar_collapsed");
  $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" ).hide();
});

演示

Answer 1

將slow添加到jQuery show和hide將帶來過渡效果。

if ( $( ".sidebar" ).hasClass( "sidebar_collapsed" ) ) { 
    $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" ).hide("slow"); 
}

$( ".sidebar_list > li > a" ).click(function() {
  $(".sidebar").removeClass("sidebar_collapsed");
  $( ".sidebar > ul > li" ).removeClass("active");
  $(this).parent().addClass("active");
  $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" ).show("slow");
});

$( ".close_sidebar, .home" ).click(function() {
  $(this).addClass("active");
  $(".sidebar").addClass("sidebar_collapsed");
  $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" ).hide("slow");
});

另外，在您的“寬度更改”中添加CSS transition也會產生一個小的動畫

.sidebar{
  background:#CBCAD8;
  width:180px ;
  color:#868695;
  padding:10px 8px 0 0;
  position:fixed;
  left:0;
  top:25px;
  bottom:0;
   transition: width .5s ease-in;
}

這是小提琴

Answer 2

此處演示

還有一些使用fadeIn和fadeOut而不是hide和show ，如下所示：

$( ".sidebar_list > li > a" ).click(function() {
  $(".sidebar").removeClass("sidebar_collapsed");
  $( ".sidebar > ul > li" ).removeClass("active");
  $(this).parent().addClass("active");
  $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" )
  .fadeIn('slow'); //fadeIn the element
});

$( ".close_sidebar, .home" ).click(function() {
  $(this).addClass("active");
    $( "ul.tree, .close_sidebar, .sidebar > ul > li > a > span, .sidebar_list > li > a > span" ).fadeOut('slow',function(){
        //after completing fadeOut add the class
        $(".sidebar").addClass("sidebar_collapsed");  
    });
});

Answer 3

檢查這個小提琴演示 。 您可以通過添加和刪除動畫類來實現。

添加了帶有動畫sidebar_open新類。

Answer 4

你可以做這樣的事情

.sidebar { 
    -webkit-transition: width 0.5s linear; 
    -moz-transition: width 0.5s linear; 
    -o-transition: width 0.5s linear; 
    transition: width 0.5 linear; 
}

此后，您只需使用永久調整大小ul元素即可解決問題。