md-sidenav摺疊左延遲，尋找替換變換

我正在使用角材料md-sidenav元素，它在左側，當我點擊它時，它向左摺疊。這個閉合/摺疊動作是用css transform：translate3d（-100％，0,0）完成的，但是在閱讀完它之後，我明白爲了節省資源，它在轉換過程中將元素'凍結'爲圖像，這個原因大約一秒鐘的延遲（我認爲），對用戶可見。我正在尋找具有相同摺疊動畫的替代品。我添加了位置：相對於md-sidenav的風格，它給元素提供了我所需要的行爲，但是如果發生這個問題，它的核心就是這樣。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/

來源

2016-09-14 omer

我發現了一個解決方案/走動，現在使用利潤率左，位置：ABSO琵琶和過渡：全部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/

來源

2016-09-14 23:16:23 omer

md-sidenav摺疊左延遲，尋找替換變換

回答

相關問題