Angular material 侧导航中的幻灯片过渡？

Question

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

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

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

幻灯片转换：当我们点击设置时，它会导航到内部菜单，然后单击后退导航到主菜单。为此需要幻灯片过渡效果。

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

有没有幻灯片过渡效果的建议。

Answer 1

将类添加到菜单中作为

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

Answer 2

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

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

还有主菜单和子菜单 2 其他类，它们的位置是绝对的，所以它们可以无摩擦地滑动

Angular material 侧导航中的幻灯片过渡？

Angular material slide transition in side nav?

html

css

css-transitions

angularjs

angular-material