다른 dom 요소가 AngularJS에 추가 될 때 dom 요소 애니메이트

Question

경로를 통해 particalar 뷰가 추가되면 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'); 
}); 

이것은 반드시 최선의 방법은 아니지만 적어도 진행 방법에 대한 통찰력을 줄 수 있습니다.