角材md-工具欄擴展轉換

我正在使用來自Angular材質的md-toolbar組件。默認情況下，它的高度是「正常」，並且通過添加類md-tall，它可以更高。角材md-工具欄擴展轉換

我試圖應用一個CSS轉換，使其順利擴展，但它不像預期的那樣工作。過渡只發生在一個方面，但不是相反的。

下面是代碼（和codepen：http://codepen.io/anon/pen/MwbrjL）：

標記

<html lang="en" ng-app="TestApp"> 
    <head> 
    </head> 
    <body layout="column" ng-controller="App"> 
    <md-toolbar layout="row" class="toolbar" ng-class="{'md-tall': expanded}"> 
     <h1 class="md-toolbar-tools">Title</h1> 
    </md-toolbar> 
    <md-content> 
     <md-button class="md-raised" ng-click="expand()">Expand</md-button> 
    </md-content> 
    </body> 
</html>

Javacript

(function() { 
    angular 
    .module('TestApp', ['ngMaterial']); 
})(); 

(function() { 
    angular 
    .module('TestApp') 
    .controller('App', App); 

    App.$inject = ['$scope']; 

    function App($scope) { 
    $scope.expanded = false; 

    $scope.expand = function() { 
     $scope.expanded = !$scope.expanded; 
    } 
    } 
})();

CSS

.toolbar { 
    transition: all 1s; 
}

謝謝您的時間。

來源

2015-05-26 Dynodzzo

簡短的回答：

以下內容添加到你的CSS：

.md-toolbar.md-tall { 
    max-height: 0px; 
}

CodePen：http://codepen.io/anon/pen/WvodLL

龍答：

角材料的工具欄（MD-工具欄）有64px的高度。 Angular實際上將height,min-height和max-height設置爲64px。高大的工具欄（md-toolbar.md-tall）具有兩倍的高度（以及最小/最大高度）。

查看https://github.com/angular/material/blob/master/src/components/toolbar/toolbar.scss的實際執行情況。

現在，這是推測：當您將.md-tall類添加到您的工具欄中時，它的高度（，最小高度和最大高度）將在轉換開始之前設置爲128px，因此無法轉換爲。實際上，當您將.md-tall的最大高度更改爲大於128像素的大小時，它將會超過它。我的感覺是，它與a）min-height覆蓋最大高度/高度時較小，b）angular通過ng-class和css轉換添加類的順序發生。

來源

2015-05-26 18:22:58 JanS

好，謝謝，很酷:)我會等待做一些解釋，但謝謝！ – Dynodzzo

好吧，在這裏，你走了。不幸的是我真的無法解釋它。它的邏輯似乎是相反的：/ – JanS

好吧，我想我明白了，謝謝你的解釋 – Dynodzzo

您需要重寫.md-tall css類以賦予其過渡屬性。

事情是這樣的：

<md-toolbar layout="row" ng-class="{'toolbar': !expanded, 'xtoolbar' : expanded}">

和CSS將是如下：

.toolbar { 
    transition: all 1s; 
} 
.xtoolbar { 
    transition: all 1s; 
    min-height: 128px; 
    max-height: 128px; 
}

來源

2015-05-26 18:29:51 UserNeD

角材md-工具欄擴展轉換

回答

相關問題