md-sidenav折りたたみ左の遅延、変換の代替品を探しています

Question

角度のある素材のmd-sidenav要素で作業しています。左側にあり、クリックすると左に折り畳まれます。このクローズ/折りたたみアクションはcss transform：translate3d（-100％、0,0）で行われますが、それについて読むと、リソースを節約するために変換中のイメージとして要素がフリーズすることがわかります。約1秒間の遅延（私は思う）、ユーザーに見える。私は同じ折り畳みアニメーションで置換を探しています。 私はposition：relativeスタイルをmd-sidenavに追加しました。これは要素に必要な振る舞いを与えましたが、この問題があればコアにあります。

HTML：

<div ng-app="myModule"> 
<div ng-controller="myCtrl" layout="column" style="height: 100%;" ng-cloak> 
    <section layout="row" flex> 
    <md-sidenav class="md-sidenav-left" md-component-id="left" 
       md-disable-backdrop md-whiteframe="4" style="position: relative;"> 
     <md-toolbar class="md-theme-indigo"> 
     <h1 class="md-toolbar-tools">Disabled Backdrop</h1> 
     </md-toolbar> 
     <md-content layout-margin> 
     </md-content> 
    </md-sidenav> 
    <md-content flex > 
    <md-toolbar layout="row"> 
     testing123 
    </md-toolbar> 
     <div layout="column" layout-align="top center" style="background-color:#ff5252;"> 
     <div> 
      <md-button ng-click="toggleLeft()" class="md-raised"> 
      Toggle Sidenav 
      </md-button> 
     </div> 
     </div> 
    </md-content> 
    </section> 
</div> 
</div> 

JS：

angular.module('myModule', ['ngMaterial']) 
.controller('myCtrl', function ($scope, $timeout, $mdSidenav) { 
    $scope.toggleLeft = buildToggler('left'); 
    $scope.toggleRight = buildToggler('right'); 
    function buildToggler(componentId) { 
     return function() { 
     $mdSidenav(componentId).toggle(); 
     } 
    }  
}); 

CSS：

.md-sidenav-left.md-closed, md-sidenav.md-closed { 
    //original angular-matireal code 
    -webkit-transform: translate3d(-100%,0,0) !important; 
    transform: translate3d(-100%,0,0) !important; 
    /* my tempoory solution */ 
    /* -webkit-transform: translate3d(0,0,0) !important; 
    transform: translate3d(0,0,0) !important; */ 
    } 

https://jsfiddle.net/suunyz3e/340/

Answer 1

私は、ソリューションが/今のmargin-leftを使用するために歩き回るました位置：アブソリュートとトランジション：すべて0.25sイージー・イン・アウト/イージーアウト。

HTML：

<div ng-app="myModule"> 
<div ng-controller="myCtrl" layout="column" style="height: 100%;" ng-cloak> 
    <section layout="row" flex> 
    <md-sidenav class="md-sidenav-left sidenav-container" md-component-id="left" 
       md-disable-backdrop md-whiteframe="4" > 
     <md-toolbar class="md-theme-indigo"> 
     <h1 class="md-toolbar-tools">Disabled Backdrop</h1> 
     </md-toolbar> 
     <md-content layout-margin> 
     </md-content> 
    </md-sidenav> 
    <md-content flex class="delay-fix-md-content" ng-class="{'walk-around-sidenav-collapse':(isToggleSidenav === true)}"> 
    <md-toolbar layout="row"> 
     testing123 
    </md-toolbar> 
     <div layout="column" layout-align="top center" style="background-color:#ff5252;"> 
     <div> 
      <md-button ng-click="toggleSidenav('left')" class="md-raised"> 
      Toggle Sidenav 
      </md-button> 
     </div> 
     </div> 
    </md-content> 
    </section> 
</div> 
</div> 

CSS：

.delay-fix-md-content{ 
    margin-left:320px !important; 
    -webkit-transition: all 0.25s ease-in-out !important; 
    -moz-transition: all 0.25s ease-in-out !important; 
    transition: all 0.25s ease-in-out !important; 
} 
.walk-around-sidenav-collapse{ 
    margin-left:0px !important; 
    -webkit-transition: all 0.25s ease-out !important; 
    -moz-transition: all 0.25s ease-out !important; 
    transition: all 0.25s ease-out !important; 
} 
.sidenav-container{ 
    position: absolute; 
    -webkit-transition: all 0.25s ease-in-out !important; 
    -moz-transition: all 0.25s ease-in-out !important; 
    transition: all 0.25s ease-in-out !important; 
} 

JS：

angular.module('myModule', ['ngMaterial']) 
.controller('myCtrl', function ($scope, $timeout, $mdSidenav) { 
     $scope.isToggleSidenav = true; 
    $scope.toggleSidenav = function (menuId) { 
     $mdSidenav(menuId).toggle(); 
     $scope.isToggleSidenav = !$scope.isToggleSidenav; 
    }; 

}); 

https://jsfiddle.net/suunyz3e/342/