當在AngularJS中添加其他dom元素時動畫dom元素

Question

我想在通過路徑添加特定視圖時爲dom元素設置動畫。 我知道如何動畫被添加像這樣的視圖元素：

HTML

<div data-ng-view 
    data-ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div> 

CSS3

.view-enter, .view-leave { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.view-enter { 
    opacity:0; 
    left:100px; 
    width:100%; 
    position:absolute; 
} 
.view-enter.view-enter-active { 
    left:0; 
    opacity:1; 
} 

.view-leave { 
    position:absolute; 
    left:0; 
    width:100%; 
    opacity:1; 
} 
.view-leave.view-leave-active { 
    left:-100px; 
    opacity:0; 
} 

，但我想這是已經存在於動畫，以DOM中的其他元素。

我該怎麼做？我想用jQuery來直接調用其他元素。我應該使用自定義指令嗎？

Answer 1

如果我正確理解文檔，您應該能夠將事件掛鉤。在你的JS中嘗試這樣的東西;

$(document).on('view-enter', function(){ 
    alert('view-enter triggered'); 
    // Animation 
    $('#some-element').addClass('view-enter'); 
}); 

這不一定是這樣做的最佳方式，但至少它可以幫助給你一些有識之士如何進行。