javascript - Angular ng-class没有完成动画

Question

我浏览了很多文档和 StackOverflow，据我所知 ng-class 应该支持动画，因此我的代码可能做错了什么。我试图在向下滚动时缩小导航栏的高度，但如果我只滚动鼠标滚轮一次，动画就会卡在一半，无法完成。当我使用鼠标平滑地向下拖动滚动条时，动画完成得很好。

一切正常，除了动画卡住，只滚动一次。

这是我的动画代码:

.controller('MainController', function ($window, $scope) {
    $scope.pageYOffset = 0;

    $scope.isScrolledDown = function () {
        return ($scope.pageYOffset >= 1);
    };

    $window.onscroll = function() {
        $scope.pageYOffset = this.pageYOffset;
        $scope.$digest();
    };
})

我这样调用 ng-class 中的 isScrolledDown() 函数:

<nav class="navbar navbar-fixed-top" ng-class="{navshrinked:isScrolledDown()}">

在我的 CSS 类中，我有具有不同高度和过渡的 navbar 和 navmin 类。

使用稳定版 AngularJS (1.4.8)

Answer 1

经过大量的搜索和思考，我终于找到了问题所在，奇怪的是，这个问题没有得到应有的解决。它与 Google Chrome 上的 fixed 和 absolute 位置有关。这个问题在一年多前就已经被报告过，但仍未得到修复。

Mozilla Firefox 默认启用平滑滚动，但在 Google Chrome 和其他浏览器上，您必须为其设置一个标志。也就是说，如果您想在客户端解决问题，这显然是一个糟糕的解决方案。

因此，如果您尝试在 fixed 或 absolute 定位元素上应用 transition，您很可能会得到同样的结果。

要解决这个问题，您必须在要转换的元素上指定一些自定义规则:

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

我希望人们看到并发现这个问题/答案很有用，因为它很重要，而且由于缺乏关于这个主题的信息，我想也没有多少人知道它。