md-sidenavアニメーションが動作しない

Question

私はui-routerにmd-sidenavを使用しています。 sidenavにアニメーションを追加できません。私はページを左からスライドさせたい。

HTML：

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

CSS：

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

} 

JS：

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

また、私は状態THRを維持していますページは大丈夫です。本当に助けに感謝します。ありがとう。

Answer 1

1.html：missing md-is-openタグ。

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

2.script：あなたがトリガされたとき、それはmd-is-openによってtrueまたはfalseに設定されている$scope.isSidenavOpen、上の変化を見ています。再度trueに更新する必要はありません。また、常に開いていた理由はtrueのままにしておく必要があります。これで十分です。

$scope.$watch('isSidenavOpen', function() { 
    //..Anything you want with the $scope.isSidenavOpen 
    if ($scope.isSidenavOpen) { 
     console.log('A') 
    } else { 
     console.log('B') 
    } 
}); 

Answer 2

州をどのように管理しているかわかりませんが、ここにui-routerの例があります。

isSideNavOpen &に時計を使用して、if-else状態を変更するだけで簡単に使用できます。

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

この詮索は@Searchingのフィドルから作成され、質問のほとんどのコードが含まれています。

Plunk!（あなたはそれが状態を変える見ることが別ウィンドウでプレビューを起動する必要があり）

これはまだ最高のは、このplunkをforkし、そこにあなたのシナリオを再作成することであろう問題が解決しない場合。