1

我正在尝试实现一个功能，当滚动时，块隐藏，当滚动停止时，块显示。

这就是演示。

angular.module('App', ['ngAnimate'])
.controller('myCtrl', function ($scope, $window, $timeout) {
    var topDist, delay;
    var win = angular.element($window);
    win.bind('scroll touchmove', function () {
      topDist = win[0].scrollY;
      $scope.$apply(function () {
        if (topDist <= 0) {
          $scope.status = false;
        } else {
          $scope.status = true;
        }
        $timeout.cancel(delay);
        delay = $timeout(function () {
          $scope.status = false;
        }, 500);
      });
    });
})

CSS

#test {
    width: 100px;
    height: 100px;
    background-color: green;
    position: fixed;
    top: 0;
    display: block !important;
}

#test.ng-hide-add, 
#test.ng-hide-remove {
  -webkit-transition:all linear 0.3s;
  -moz-transition:all linear 0.3s;
  -o-transition:all linear 0.3s;
  transition:all linear 0.3s;
}

#test.ng-hide-add,
#test.ng-hide-remove.ng-hide-remove-active {
 -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform:  translateY(0);
  -o-transform: translateY(0);
  transform:  translateY(0);

}

#test.ng-hide-add.ng-hide-add-active,
#test.ng-hide-remove {
  -ms-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  -moz-transform:  translateY(-100px);
  -o-transform: translateY(-100px);
  transform:  translateY(-100px);
}

当我停止滚动时，该块不应立即显示。它应该执行 ng-hide-remove 动画。但结果不是我想要的。

在 AngularJS 1.1.5 中运行的相同代码运行良好（使用 ng-animate）。

有什么问题吗？

4

1 回答 1

1

好吧，这是我的错。我想念这.ng-hide堂课。只需添加一行：

#test.ng-hide,    //add 
#test.ng-hide-add.ng-hide-add-active,
#test.ng-hide-remove {
  -ms-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  -moz-transform:  translateY(-100px);
  -o-transform: translateY(-100px);
  transform:  translateY(-100px);
}
于 2013-09-19T14:06:31.450 回答