Angular 材质 md-toolbar 展开过渡答案

【问题标题】：Angular material md-toolbar expansion transitionAngular 材质 md-toolbar 展开过渡
【发布时间】：2015-08-08 13:18:57
【问题描述】：

我正在使用来自 Angular 材料的 md-toolbar 组件。默认情况下，它的高度是“正常的”，通过添加类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>

Java脚本

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

感谢您的宝贵时间。

【问题讨论】：

标签： javascript angularjs css material-design angular-material

【解决方案1】：

简答：

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

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

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

长答案：

Angular 材质的工具栏（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 类添加到您的工具栏时，它的高度（最小高度和最大高度）将在过渡开始前设置为 128 像素 - 因此没有任何东西可以过渡到.实际上，当您将 .md-tall 的最大高度更改为大于 128 像素时，它将被动画化。我在这里的感觉是，它与 a）当它们较小时最小高度覆盖最大高度/高度和 b）角度通过 ng-class 和 css 转换添加类的顺序。

【讨论】：

好吧，谢谢，很酷 :) 我会等待一些解释，但谢谢！
好吧，给你。不幸的是，我无法解释它，真的。它的逻辑似乎有点颠倒：/

【解决方案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;
}

【讨论】：