Geek Answers Handbook

Angular material slide transition in side nav?

When I click on the settings, it will move to the internal navigation menu and after that the main menu will appear here.

To do this, I am trying to implement a slide transition in side navigation using angular material, but it does not show the effect of moving a slide in side nav.

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

Slide transition: When we click on the settings, go to the internal menu, and then press the back button, go to the main menu. This requires a slide transition effect.

For example: http://plnkr.co/edit/o37kGQByrXX9jdIxuIXZ

Any suggestions suggest a slide transition effect.

+5
source share
2 answers

Check this out http://plnkr.co/edit/Ksfo7fnSB0c4DH6egE3S?p=preview

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

and mainmenu and submenu 2 other classes, their positions are absolute, so they can slide without friction

+3
source

add classes to menu as

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

and css will be

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

More articles:


All Articles