當元素在AngularJS中可見時運行一些DOM操作

Question

當某些元素變爲可見時可以優雅地運行某些代碼，而隱藏其他代碼時可以優雅地運行某些代碼？我想在單頁面應用程序中應用可滑動的滾動區域，並且只有當元素可見時纔可以。

Answer 1

Angular 1.1.4在框架中添加了動畫支持。有關更多信息，請參見here。

雖然我不完全確定基於您的問題中的信息，但您可以使用css3過渡來實現您的效果。另外，您可以在JavaScript中創建動畫將在NG-顯示/ NG隱藏運行：

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