javascript - 如何使用js使导航菜单淡入？它从汉堡包图标中弹出，我希望它在打开时淡入，在关闭时淡出

Question

jQuery 在这里不可用，只有 jQuery lite。我没有太多的 js 经验，所以这就是我需要帮助的地方。

我在全局标题上有一个导航栏。当它到达移动断点时，它变成一个汉堡包图标。当您单击该图标时，会弹出一个列表，我希望该 Pane 淡入淡出。

现有的 js 代码可以切换菜单的打开和关闭，并绑定(bind)到 html 中的 anchor 标记。 html 与 angular 和一些 jsp 相关联并且有点困惑，所以我宁愿保持简单并将淡入淡出编码到 js 切换函数中。看起来像:

ctrl.toggleMobileProfileMenu = function () {
    if (viewport.isMobile()){
        if (!$scope.mobileProfileMenuOpen){

    // insert fadein code here, such as
            $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;
    }
}; 

我正在考虑创建一个像

这样的辅助函数

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

或者这样更好:

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

然后另一个用于淡出。

我在这里只用 js 做这件事是否朝着正确的方向前进？我曾在 html 元素上尝试过过渡属性，但由于它的布局方式(长话短说)，这是一个更简单、更直接的实现，因为 toggleMobileNavMenu() 函数是从单独的 jsp 调用的。

Answer 1

是的，你的方向是对的，显然还有很大的改进空间。

我建议添加前缀类，例如 js-mobile-menu 来识别受 JavaScript 影响的元素。

我怀疑您是否真的需要使用这些函数扩展 ctrl 对象，但这取决于您。

考虑使用 CSS transition使不透明度动画更流畅。