javascript - How to make a nav menu fade in with js? It pops out from a hamburger icon and I want it to fade in on open and out on close -

jquery not available here, jquery lite. dont have experience js, thats kinda need help.

i have navbar on global header. when goes mobile breakpoints, becomes hamburger icon. when click icon list pops out, , want pane fade in , out.

there existing js code toggles menu open , close, , tied anchor tag in html. html tied angular , jsp's , bit messy, i'd rather keep simple , code fade js toggle function. looks like:

ctrl.togglemobileprofilemenu = function () {     if (viewport.ismobile()){         if (!$scope.mobileprofilemenuopen){      // insert fadein code here, such             $scope.menufadein();              $scope.mobileprofilemenuopen = true;             ctrl.getbodyelement().addclass('hide-overflow');         } else {     // insert fade out code here, such as...            $scope.menufadeout();              $scope.mobileprofilemenuopen = false;             ctrl.getbodyelement().removeclass('hide-overflow');         }         $scope.mobilenavmenuopen = false;     } };  

i thinking creating helper function

  ctrl.fademenuin = function () {          var el = $window.getelementbyid('mobile-menu');          el.style.transition = "all 1s ease-in;"          el.style.opacity = 1;   }; 

or better:

  ctrl.fademenuin = function () {          $('.menu-page-class').css("transition", "all 1s ease-in");          $('.menu-page-class').css("opacity", 1);   }; 

and fade out.

am going in right direction here doing js? had tried transition properties on html elements due how thats laid out (long story short), easier , more direct implementation becaue togglemobilenavmenu() function called seperate jsp.

yes, going in right direction, there lot of space improvements.

i recommend adding prefixed classes, js-mobile-menu identify elements, affected javascript.

i doubt if need extend ctrl object functions, that's you.

consider using css transition make opacity animation smoother.