Question

我正在使用角度材料md-sidenav元素，它在左侧，当我点击它时，它向左折叠。这个关闭/折叠动作是用css转换完成的：translate3d（-100％，0,0），但在阅读之后我明白为了节省资源，它会冻结＆＃39;在变换期间将元素作为图像，这会导致用户可见的延迟大约一秒钟（我认为）。我正在寻找相同折叠动画的替代品。我添加了位置：相对于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，position：absolute和transition：所有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/

md-sidenav折叠左延迟，寻找变换

1 个答案: