側導航中的角度材料滑動過渡？

當我點擊設置時，它會導航到內部導航菜單，然後在這裏返回主菜單選項。側導航中的角度材料滑動過渡？

爲此，我試圖使用角度材質在側導航欄中實現幻燈片切換，但未在側導航欄中顯示幻燈片切換效果。

Angular material slide nav Plnkr ::http://plnkr.co/edit/tAocrJglxnLs3mMPqAnb

幻燈片切換：當我們點擊設置，它的導航到內部的菜單，然後點擊回導航到主菜單。對於那需要幻燈片切換效果。

例如：http://plnkr.co/edit/o37kGQByrXX9jdIxuIXZ

任何一個建議上滑動過渡效果。

來源

2016-07-05 Karthik

您的要求不明確。請詳細說明你想要做什麼？ –

@RahulArora感謝您的快速回復。我添加了更多描述和示例plnkr。 – Karthik

您提供的plunk有什麼問題？ – Weedoze

檢查了這一點 http://plnkr.co/edit/Ksfo7fnSB0c4DH6egE3S?p=preview

<md-content class="main-ctr" ng-controller="RightCtrl" class="md-padding">

和mainme nu和submenu 2其他職業，他們的職位是絕對的，所以他們可以滑動無摩擦

來源

2016-07-07 07:28:51

現在應該工作，添加一個類donotshow在開始，以防止滑動子菜單 –

謝謝Piyush，優秀答案。我試圖在一個更內層的子菜單中實現，但它不起作用。當我們點擊設置它是導航到子菜單，在該子菜單我有搜索按鈕，點擊該搜索按鈕它導航到內部搜索輸入，然後點擊關閉/十字按鈕它導航到後面的子菜單。爲此，我嘗試了但它不工作。你能給我建議嗎？問題在同一個plnkr。 – Karthik

我沒有看到子菜單中使用相同的PLUNK上面的任何搜索按鈕，可能是如果你更新小提琴 –

類添加到菜單

<div ng-show="submenu" class="submenu"> <div ng-show="mainMenu" class="mainmenu">

和CSS將

.submenu.ng-hide, 
.mainmenu.ng-hide{ 
    display: block !important; 
    opacity: 0; 
    transition: all .35s linear; 
} 

.submenu, 
.mainmenu{ 
    opacity: 1; 
    transition: all .35s linear; 
}

來源

2016-07-07 06:26:12

我嘗試過，但它不是幻燈片效果，並獲得位置問題。按照plnk：http://plnkr.co/edit/1boZbKdAf36Fk7UePghe?p=preview – Karthik

試圖在該plunkr上工作。但它不支持'！important'的使用。你需要什麼樣的轉變？左到右？ –

你可以給一個jsfiddle鏈接。 plunkr編輯有點困難 –

側導航中的角度材料滑動過渡？

回答

相關問題