Angular material md transition extension panel
I am using a component md-toolbar
from Angular stuff. By default, its height is "normal", and by adding a class md-tall
it can be taller.
I am trying to apply a CSS transition so that it expands smoothly, but it does not behave as expected. The transition occurs in one direction only, but not in the opposite direction.
Here is the code (and code: 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.
source to share
The short answer is:
Add the following to your css:
.md-toolbar.md-tall {
max-height: 0px;
}
CodePen: http://codepen.io/anon/pen/WvodLL
Long answer:
Angular material toolbar (md-toolbar) is 64 pixels high. Angular actually installs height
, min-height
and max-height
at 64px. The tall toolbar (md-toolbar.md-tall) is twice the height (and the minimum / maximum height).
See https://github.com/angular/material/blob/master/src/components/toolbar/toolbar.scss for the actual implementation.
Now that's a guess: when you add a class .md-tall
to your toolbar, its height (, min-height and max-height) will be set to 128px before the transition starts - and so there is nothing to transition to.In fact, when you change the maximum height. md-tall by something larger than 128px, it will animate outside of it. I feel it has to do with the fact that a) min-height overrides max-height / height when smaller, and b) the order in which Angular adds classes by ng class and css transitions.
source to share
You need to override the .md-tall css class to give it a transition property.
Something like that:
<md-toolbar layout="row" ng-class="{'toolbar': !expanded, 'xtoolbar' : expanded}">
and the CSS will look like this:
.toolbar {
transition: all 1s;
}
.xtoolbar {
transition: all 1s;
min-height: 128px;
max-height: 128px;
}
source to share