Углубленный переход md-панели панели углового материала

Я использую компонент md-toolbar из углового материала. По умолчанию его высота «нормальная», и, добавив класс md-tall, он может быть выше.Углубленный переход md-панели панели углового материала

Я пытаюсь применить переход CSS, чтобы он плавно расширялся, но он не ведет себя так, как ожидалось. Переход происходит только в одном направлении, но не наоборот.

Вот код (и 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; 
}

Спасибо за ваше время.

источник

2015-05-26 Dynodzzo

Короткий ответ:

Добавьте следующие строки в CSS:

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

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

Длинный ответ:

панель

ANGULAR материала (мкр-панель инструментов) имеет высоту 64px. Угловая на самом деле устанавливает height, min-height и max-height - 64px. Высокая панель инструментов (md-toolbar.md-tall) имеет удвоенную высоту (и минимальную/максимальную высоту).

См. https://github.com/angular/material/blob/master/src/components/toolbar/toolbar.scss для фактической реализации.

Теперь это предположение: когда вы добавляете класс .md-tall на свою панель инструментов, его высота (, min-height и max-height) будет установлена на 128 пикселей до начала перехода - и, следовательно, нечего туда переходить. Фактически, когда вы меняете максимальную высоту .md-tall на нечто большее, чем 128 пикселей, оно будет анимировано за его пределами. Я чувствую, что это имеет какое-то отношение к: а) минимальной высоте, превосходящей максимальную высоту/высоту, когда они меньше, и б) порядок, в котором угловые добавляет классы по переходам ng-класса и css.

источник

2015-05-26 18:22:58 JanS

Ну, спасибо, прикольно :) Я буду ждать некоторых объяснений, хотя, но спасибо! – Dynodzzo

Ну, вот иди. К сожалению, я не смог объяснить это, действительно. Логика этого кажется вроде обратным:/ – JanS

Хорошо, я думаю, что понял, спасибо за объяснение – Dynodzzo

Вам необходимо переопределить класс .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; 
}

источник

2015-05-26 18:29:51 UserNeD

Углубленный переход md-панели панели углового материала

ответ

Смежные вопросы