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

Posted 2023-03-06

【中文标题】侧面导航中的角材料滑动过渡？

【英文标题】：Angular material slide transition in side nav?

【发布时间】：2016-11-06 20:15:35

【问题描述】：

当我点击设置时，它会导航到内部导航菜单，然后返回主菜单选项。

为此，我正在尝试使用 angular material 在侧导航中实现幻灯片过渡，但它没有在侧导航中显示幻灯片过渡效果。

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

幻灯片过渡：当我们点击设置时，它导航到内部菜单，然后点击返回导航到主菜单。对于那个需要幻灯片过渡效果。

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

任何人建议幻灯片过渡效果。

【问题讨论】：

您的要求不明确。请详细说明您到底想做什么？

@RahulArora 感谢您的快速回复。我添加了更多描述和示例 plnkr。

您提供的 plunkr 有什么问题？

在那个 plunkr 幻灯片过渡效果在内部菜单中不起作用。

【参考方案1】：

看看这个 http://plnkr.co/edit/Ksfo7fnSB0c4DH6egE3S?p=preview

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

还有 mainmenu 和 submenu 2 个其他类，它们的位置是绝对的，所以它们可以无摩擦地滑动

【讨论】：

现在应该可以了，在开头添加一个类donotshow防止子菜单滑动

谢谢 Piyush，很好的回答。我正在尝试在另一个内部子菜单中实现，但它不起作用。当我们单击设置时，它导航到子菜单，在该子菜单中我有搜索按钮，单击该搜索按钮它导航到内部搜索输入，然后单击关闭/交叉按钮它导航到后退子菜单。为此，我尝试了但它不起作用。你能建议我吗？问题出在同一个 plnkr 中。

我在子菜单中没有看到任何使用上面相同 plunkr 的搜索按钮，可能是如果你更新小提琴

检查你的小提琴的这个分支plnkr.co/edit/FZqQgdtglx04KZkPA4Od?p=preview

您想滑动搜索位置并带有子菜单标题或完整的子菜单？

【参考方案2】：

将类添加到菜单中

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

【讨论】：

我试过了，但这不是幻灯片效果和获取位置问题。关注 plnk：plnkr.co/edit/1boZbKdAf36Fk7UePghe?p=preview

试图在那个 plunkr 上工作。但它不支持使用'！important'。你需要什么样的过渡？从左到右？

你能给个jsfiddle链接吗？ plunkr 编辑有点困难