Question

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

这是DEMO。

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）。

它有什么问题吗？

Answer 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);
}

AngularJS 1.2 ng-hide动画行为奇怪

1 个答案: