Angularjs md sidenav动画不工作

我正在为ui路由器使用

md sidenav

。我无法将动画添加到

sidenav

。我想让页面从左边滑动

HTML:

<div ng-cloak>
  <md-sidenav md-component-id="left" class="md-sidenav-left">
  </md-sidenav>
</div>

.md-sidenav-left {
  top:75px;
  box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7), 0 1px 5px 0 rgba(0,0,0,0.2);
  padding-top:20px;      
  transition: 1.5s;     
  width: 970px;
  z-index:99;
  padding-left: 20px;
  padding-right: 20px;

}

      $scope.$watch('isSidenavOpen', function(isSidenavOpen) {
        //$scope.$watch(function(){
          $scope.isSidenavOpen = true;
          return $mdSidenav('left').isOpen();
          }, function(isOpen){             
               if(!isOpen) {
                 $state.go('home')
               }
          });

JS:

<div ng-cloak>
  <md-sidenav md-component-id="left" class="md-sidenav-left">
  </md-sidenav>
</div>

.md-sidenav-left {
  top:75px;
  box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7), 0 1px 5px 0 rgba(0,0,0,0.2);
  padding-top:20px;      
  transition: 1.5s;     
  width: 970px;
  z-index:99;
  padding-left: 20px;
  padding-right: 20px;

}

      $scope.$watch('isSidenavOpen', function(isSidenavOpen) {
        //$scope.$watch(function(){
          $scope.isSidenavOpen = true;
          return $mdSidenav('left').isOpen();
          }, function(isOpen){             
               if(!isOpen) {
                 $state.go('home')
               }
          });

---

此外，我通过页面维护状态。非常感谢您的帮助。谢谢。

不确定您是如何维护状态的，但这里有一个ui路由器的示例

只需在isSideNavOpen上使用手表&添加了一个

if-else

条件来更改状态

$scope.$watch('isSidenavOpen', function(isSidenavOpen) {
    if(isSidenavOpen){
        $state.go('about');
    }
    else{
        $state.go('home');
    }    
});

这个plunk是由@Searching的小提琴创建的，包含了您问题中的大部分代码

（您必须在单独的窗口中启动预览以查看其更改状态）

---

如果这仍然不能解决问题，那么最好的办法就是将这个问题抛出去，在那里重新创建您的场景。

不确定您是如何维护状态的，但下面是一个ui路由器的示例

只需在isSideNavOpen上使用手表&添加了一个

if-else

条件来更改状态

$scope.$watch('isSidenavOpen', function(isSidenavOpen) {
    if(isSidenavOpen){
        $state.go('about');
    }
    else{
        $state.go('home');
    }    
});

这个plunk是由@Searching的小提琴创建的，包含了您问题中的大部分代码

（您必须在单独的窗口中启动预览以查看其更改状态）

---

如果这仍然不能解决问题，那么最好的办法就是放弃这个问题，在那里重新创建您的场景。

1.html:missing

md is open

tag

<md-sidenav md-component-id="left" md-is-open="isSidenavOpen" class="md-sidenav-left">

---

1.html:缺少

md是打开的

标记

<md-sidenav md-component-id="left" md-is-open="isSidenavOpen" class="md-sidenav-left">

---

控制台中有错误吗？提供的信息非常少。没有错误。。我已经为md sidenav left添加了css样式。你能用这个JSFIDLE或者用你的设置创建一个新的JSFIDLE来演示这个问题吗？我在维护页面之间的状态。。我试过你的例子，但是第二次当我点击“状态”时，它并没有变为以前的值。考虑到小提琴的工作原理，加上你的代码，它显然是另一回事。我想让页面从左边滑动。你是说菜单对吗？请描述/更新问题，说明您正在做什么，以及您希望做什么。用户单击菜单中的链接后，是否试图隐藏导航？控制台中是否有任何错误？提供的信息非常少。没有错误。。我已经为md sidenav left添加了css样式。你能用这个JSFIDLE或者用你的设置创建一个新的JSFIDLE来演示这个问题吗？我在维护页面之间的状态。。我试过你的例子，但是第二次当我点击“状态”时，它并没有变为以前的值。考虑到小提琴的工作原理，加上你的代码，它显然是另一回事。我想让页面从左边滑动。你是说菜单对吗？请描述/更新问题，说明您正在做什么，以及您希望做什么。您是否试图在用户单击菜单中的链接后隐藏导航？