角材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-工具栏扩展转换

回答

相关问题