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