側菜單欄的過渡效果

我正在嘗試獲取固定的側面菜單欄，該菜單欄在點擊菜單時打開。側菜單欄的過渡效果

它正在按預期工作，現在我需要的只是在擴展/關閉時應用平滑過渡效果。並優化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

來源

2015-10-29 Sowmya

添加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

來源

2015-10-29 07:54:14

謝謝。但是爲什麼頁面鏈接菜單上出現混亂？ – Sowmya

這是因爲那個jQuery動畫。如果你發現「Page Link」這個詞有兩行一段時間，然後變成一行 –

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

來源

2015-10-29 07:57:03

但是它在打開菜單時有一些抽搐...任何想法爲什麼... – Sowmya

它因爲元素的位置.. 'li'中的'ul'一旦進入圖片即「display：block」，就會獲得實際的'width'和'height'。這將是'CSS'問題，然後.. –

檢查這個小提琴demo。你可以通過添加和刪除動畫類來完成。

增加了動畫的新類sidebar_open。

來源

2015-10-29 08:02:44

你可以做這樣的事情

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

此之後，你只與常設調整大小UI元素來解決這個問題。

來源

2015-10-29 08:28:40 Tom

側菜單欄的過渡效果

回答

相關問題