Angular material md-工具栏扩展过渡

Question

我正在使用 Angular material 中的 md-toolbar 组件。默认情况下，它的高度是"normal"，通过添加class md-tall，它可以更高。

我正在尝试应用 CSS 过渡以使其平滑展开，但它没有按预期运行。转换仅以一种方式发生，而不是以相反的方式发生。

这是代码（和代码笔：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>

Javascript

(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;
}

代码笔：http://codepen.io/anon/pen/WvodLL

长答案：

Angular material的工具栏（md-toolbar）的高度为64px。 Angular 实际上将 height、min-height 和 max-height 设置为 64px。高工具栏 (md-toolbar.md-tall) 的高度是该高度的两倍（min-/max-height）。

有关实际实施，请参阅 https://github.com/angular/material/blob/master/src/components/toolbar/toolbar.scss。

现在，这是推测：当您将 .md-tall class 添加到工具栏时，其高度（、最小高度和最大高度）将在过渡开始前设置为 128px - 因此没有什么可以过渡到。事实上，当您将 .md-tall 的最大高度更改为大于 128px 的值时，它会在超出它的范围内进行动画处理。我在这里的感觉是，它与 a) 最小高度覆盖 max-height/height 当它们更小时和 b) angular 通过 ng-[= 添加 classes 的顺序有关43=] 和 css 转换发生。

Answer 2

您需要覆盖 .md-tall css class 以使其过渡属性.

像这样：

  <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;
}

Angular material md-工具栏扩展过渡

Angular material md-toolbar expansion transition

javascript

angularjs

css

material-design

angular-material