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

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

以下是Fiddle

Answer 2

<强> DEMO HERE

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

检查这个小提琴demo。您可以通过添加和删除动画类来实现。

添加了带动画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元素来解决问题。

侧边菜单栏

4 个答案: