javascript - 当元素在 AngularJS 中可见时运行一些 DOM 操作

Question

是否可以在某些元素可见时优雅地运行一些代码，而在它隐藏时运行另一段代码？我想在单页应用程序中到处应用可滑动滚动区域，并且只有在元素可见时才有可能。

Answer 1

Angular 1.1.4 在框架中添加了动画支持。参见 here获取更多信息。

您可以使用 css3 转换来实现您的效果，但根据您问题中的信息我不能完全确定。或者，您可以在 Javascript 中创建将在 ng-show/ng-hide 上运行的动画:

<div data-ng-hide="hidden == true" data-ng-animate="'myAnimation'">
  ...
</div>
<div data-ng-show="hidden == false" data-ng-animate="'myAnimation'">
  ...
</div>

...

//you can inject stuff!
myModule.animation('myAnimation-show', ['$rootScope', function($rootScope) {
  return { 
    setup : function(element) {
      //this is called before the animation
    },
    start : function(element, done, memo) {
      //this is where the animation is expected to be run
    }
  };
}]);

myModule.animation('myAnimation-hide', ['$rootScope', function($rootScope) {
  return { 
    setup : function(element) {
      //this is called before the animation
    },
    start : function(element, done, memo) {
      //this is where the animation is expected to be run
    }
  };
}]);

编辑:

查看示例 here .