0
我正在使用角材料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/