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

Question

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

Answer 1

Angular 1.1.4 在框架中添加了动画支持。请参阅此处了解更多信息。

您可以使用 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
    }
  };
}]);

编辑：

请参阅此处的示例。