Я просмотрел много документации и StackOverflow, насколько я могу сказать, ng-класс должен поддерживать анимацию, поэтому я, вероятно, что-то неправильно сделал в своем коде. Я пытаюсь уменьшить свою высоту навигатора при прокрутке вниз, но если я прокручу колесо мыши только один раз, анимация застрянет на полпути и не закончится. Когда я использую мышь и плавно перемещаю полосу прокрутки, анимация заканчивается просто отлично.
Все работает, за исключением того, что анимация застревает, когда прокручивается только один раз.
Это мой код для анимации:
.controller('MainController', function ($window, $scope) {
$scope.pageYOffset = 0;
$scope.isScrolledDown = function () {
return ($scope.pageYOffset >= 1);
};
$window.onscroll = function() {
$scope.pageYOffset = this.pageYOffset;
$scope.$digest();
};
})
Я вызываю функцию isScrolledDown() в ng-классе следующим образом:
<nav class="navbar navbar-fixed-top" ng-class="{navshrinked:isScrolledDown()}">
В моем классе CSS у меня есть navbar
и navmin
класс с разными высотами и переходами.
Используя стабильную версию AngularJS (1.4.8)
После многих поисков и размышлений я, наконец, нашел проблему, которая, как ни странно, не была решена так, как должна была. Это связано с fixed
и absolute
позицией в Google Chrome. Эта проблема уже сообщалась более года назад, но она еще не исправлена.
Mozilla Firefox по умолчанию плавная прокрутка, но в Google Chrome и, возможно, в других браузерах вы должны установить для нее флаг. То есть, если вы хотите исправить проблему на стороне клиента, что, очевидно, является ужасным решением.
Таким образом, если вы попытаетесь применить transition
на fixed
или absolute
позиционированном элементе, скорее всего, вы получите тот же результат.
Чтобы исправить это, вы должны указать некоторые настраиваемые правила для элемента, который вы хотите перевести:
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
-webkit-backface-visibility: hidden;
Я надеюсь, что люди видят и находят этот вопрос/ответ полезным, поскольку это довольно много, и из-за отсутствия информации по этому вопросу я полагаю, что не многие знают об этом.