javascript - 侧边菜单栏的过渡效果

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

<强> DEMO

Answer 1

在 jQuery show 和 hide 中添加 slow 将带来过渡效果。

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

这是Fiddle