md-sidenav動畫無法正常工作

我正在使用md-sidenav作爲UI路由器。我無法將動畫添加到sidenav。我希望頁面從左側滑動。md-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 ough頁面。非常感謝幫助。謝謝。

來源

2016-11-23 Anuja Patil

控制檯中是否有錯誤？提供的信息是非常低的.. – Searching

沒有錯誤..我已經添加了md-sidenav-left的css樣式.. –

你可以用這個jsfiddle http://jsfiddle.net/q9fb0ejw/創建一個新的或者你的設置來證明這個問題？ – Searching

1.html：缺少md-is-open標記。

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

2.script：你是在$scope.isSidenavOpen，觸發時，它是由md-is-open設置爲true或false看變化。您不需要再次將其更新到true，並將其保留爲true，這就是它始終打開的原因。這應該就夠了。

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

來源

2016-12-01 00:43:55 Searching

不知道你是如何維護狀態的，但這裏是ui-router的一個例子。

只使用手錶isSideNavOpen &增加了if-else條件來改變狀態。

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

這個plunk是從@Searching的小提琴創建的，包含了大部分你的問題的代碼。

Plunk!（你必須推出預覽在一個單獨的窗口中看到它改變狀態）

如果仍然不能解決問題，最好是到餐桌這一普拉克並重新創建您的場景在那裏。

來源

2016-11-30 16:05:55 rakemen

md-sidenav動畫無法正常工作

回答

相關問題