首页 > 其他分享> > 角材料md工具栏扩展过渡

角材料md工具栏扩展过渡

2019-11-20 08:37:16 作者：互联网

我正在使用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>

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

感谢您的时间.

解决方法:

简短答案：

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

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

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

长答案：

角度材质的工具栏(md-toolbar)的高度为64px. Angular实际上将高度,最小高度和最大高度设置为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的max-height更改为大于128px的值时,它的动画效果将超出该范围.我的感觉是,这与a)最小时覆盖最小高度/最大高度/高度和b)按ng-class和css过渡进行角度添加类的顺序有关.

标签：css3,angularjs,material-design,angular-material,javascript
来源： https://codeday.me/bug/20191120/2042586.html