Question

我正在使用Angular材质中的md-toolbar组件。默认情况下，它的高度是“正常”，通过添加类md-tall，它可以更高。

我正在尝试应用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;
}

感谢您的时间。

Answer 1

简答：

将以下内容添加到您的css：

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

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

答案很长：

Angular material的工具栏（md-toolbar）高度为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类添加到工具栏时，它的高度（，min-height和max-height）将在转换开始之前设置为128px - 因此没有任何内容过渡到。事实上，当你将.md-tall的最大高度更改为大于128px的东西时，它会超出它的动画。我的感觉是，它与a）最小高度覆盖最大高度/高度较小时有关; b）角度按ng-class和css过渡添加类的顺序。

Answer 2

您需要覆盖.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;
}

角度材料md-工具栏扩展过渡

2 个答案: