css - md-sidenav fold left delay，寻找transform的替代品

Question

我正在使用 angular-material md-sidenav 元素，它位于左侧，当我单击它时，它会向左折叠。这个关闭/折叠 Action 是用 css transform: translate3d(-100%,0,0) 完成的，但是在阅读之后我明白为了节省资源它在转换过程中将元素“卡住”为图像，这导致延迟大约一秒钟(我认为)，对用户可见。我正在寻找具有相同折叠动画的替代品。 我在 md-sidenav 中添加了 position:relative 样式，它为元素提供了我需要的行为，但如果出现此问题，它就处于核心位置。

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、position:absolute 和 transition: all 0.25s ease-in-out/ease-out 找到了解决方案/四处走动。

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/