Угловой нг-класс не заканчивает анимацию

0

Я просмотрел много документации и 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)

  • 0
    До сих пор я узнал из тестирования, что когда я добавляю точно такой же код где-то еще в моем теле, они оба волшебным образом начинают работать просто отлично. Это очень странно и расстраивает ..

1 ответ

0
Лучший ответ

После многих поисков и размышлений я, наконец, нашел проблему, которая, как ни странно, не была решена так, как должна была. Это связано с 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;

Я надеюсь, что люди видят и находят этот вопрос/ответ полезным, поскольку это довольно много, и из-за отсутствия информации по этому вопросу я полагаю, что не многие знают об этом.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню