侧导航中的角度材料滑动过渡？

当我点击设置时，它会导航到内部导航菜单，然后在这里返回主菜单选项。侧导航中的角度材料滑动过渡？

为此，我试图使用角度材质在侧导航栏中实现幻灯片切换，但未在侧导航栏中显示幻灯片切换效果。

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编辑有点困难 –

侧导航中的角度材料滑动过渡？

回答

相关问题