CODEWITHSUNDEEP
javascriptangularjscssmaterial-designangular-material
Dynodzzo
Dynodzzo

Reputation: 75

Angular material md-toolbar expansion transition

I'm using the md-toolbar component from Angular material. By default, its height is "normal", and by adding the class md-tall, it can be taller.

I'm trying to apply a CSS transition to make it expand smoothly, but it doesn't behave as expected. The transition only occurs one way, but not in reverse.

Here is the code (and a codepen : http://codepen.io/anon/pen/MwbrjL) :

Markup

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

Thank you for your time.

Upvotes: 4

Views: 2754

Answers (2)

JanS
JanS

Reputation: 2075

Short answer:

Add the following to your css: 

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

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

Long answer:

Angular material's toolbar (md-toolbar) has a height of 64px. Angular actually sets the height, min-height and max-height to 64px. The tall toolbar (md-toolbar.md-tall) has double that height (and min-/max-height as well).

See https://github.com/angular/material/blob/master/src/components/toolbar/toolbar.scss for the actual implemetation.

Now, this is speculation: when you add the .md-tall class to your toolbar, its height (, min-height and max-height) will be set to 128px before the transition begins - and therefore has nothing to transition to. In fact, when you change the max-height of .md-tall to something bigger than 128px, it will be animated beyond it. My feeling here is that it has something to do with a) min-height overriding max-height/height when they are smaller and b) the order in which angular adds classes by ng-class and css transitions take place.

Upvotes: 3

UserNeD
UserNeD

Reputation: 1509

You need to override the .md-tall css class to give it transition property.

Something like this:

  <md-toolbar layout="row"  ng-class="{'toolbar': !expanded, 'xtoolbar' : expanded}">

and the CSS will be as following:

.toolbar {
  transition: all 1s;
}
.xtoolbar {
  transition: all 1s;
  min-height: 128px;
  max-height: 128px;
}

Upvotes: 0

Related Questions