2014-05-17 2 views
1

나는 angularjs를 사용하여 간단한 연속 효과를 원합니다. jquery에서이 작업을 수행 할 수 있지만, angularj를 사용하여 동일한 작업을 수행하기 위해 따라야 할 경로를 모르겠습니다.순차 효과를 적용하는 "각도 법"은 무엇입니까?

구체적으로 말하자면, 여기에 jquery 기반의 순차적 효과가 있는데, 이는 angularjs를 사용하여 만들고 싶습니다. 태그를 클릭하면 고정 된 기간 동안 다른 태그의 텍스트 값이 배열의 각 요소에 순차적으로 설정됩니다. 이것의 jsfiddle 프로토 타입은 솔직히 짖는 시작 어떤 나무도 확실하지 않다, 그 자바 스크립트 코드

var wordlist = ['A', 'B', 'C', 'D', 'E']; 
var duration = 200; 
var i = 0; 

show_next_word = function() { 
    if (i < wordlist.length) { 
     $('#word').hide() 
      .text(wordlist[i++]) 
      .fadeIn() 
      .delay(duration) 
      .fadeOut(show_next_word // recursively call until end of word list 
     ); 
    } else { 
     i = 0; // re-set index 
    } 
}; 

$('#startbutton').click(show_next_word); 

이 각도에서 같은 일을하는 것입니다

http://jsfiddle.net/mjandrews/U53jy/6/

이다.

지금까지 검색 한 내용에서 $q service을 사용하여 체인 약속에 대한 토론을 찾았습니다. 이게 내가 생각해야 할 것인가? 누구든지 작동 예제를 가르쳐 주시겠습니까? 계속 진행하는 것이 최선의 방법이 아니면 $animate과 같은 것이 더 적절합니까? 내가 고려해야 할 다른 것이 있습니까? 더 나은 방법에 대한 조언을 주시면 감사하겠습니다.

p.s. 이 질문은이 answer의 조언에 기반합니다. "그리고 $에 도달하기 전에 jQuery로 해결하는 방법을 알고 있다고 생각하는 문제가 생겼을 때, AngularJS를 제한합니다. 모르는 경우, 물어보십시오! " jquery에서 해결하는 방법을 알고 있다는 문제가 있습니다. 나는 각을 이루고 싶다. 나는 문제에 대해 생각해 보려고 노력했으며 anglejs에 대한 나의 경험이 부족하기 때문에 나는 손실을 입었고 그래서 그것이 내가 묻는 이유이다.

+0

당신이 애니메이션 $에 대한 문서 봤어 지시어와 JQuery와 애니메이션 코드를 사용하여 ngAnimate 및 setInterval을

http://plnkr.co/edit/inSQLEULXdtK3w5XcBoS?p=preview

다른를 사용하여 간단한 예제가있다? https://docs.angularjs.org/api/ngAnimate/service/$animate –

+0

@AndrewChurch 나는 애니메이션을 알고 있지만 탐구하지는 않았다. $ animate. 그것과 $ q는 모두이 주제에 대한 나의 검색에서 가능성을 모았습니다. 나는 $ initialize를 명시 적으로 언급하도록 나의 초기 질문을 수정했다. $ animate가 내가 고려중인 효과와 같은 것을 찾으러가는 길이면 위대하고 나는 그것을 파헤칠 것이다. – mjandrews

+0

@mjandrews $ q는 비동기 작업이 포함될 때 순차 효과를 적용하는 방법입니다. 약속은 아주 멋지지만 멋진 데 도움이 될 것 같지는 않습니다. –

답변

1

AngularJS와 방법은 당신이 애니메이션을 수행하는 방법을 완전히 무관 이며, DOM만큼 당신이 지시에 보관으로 을 조작. 구성 요소에서 애니메이션을 수행하면 해당 구성 요소를 지시문 및 기타 지시문에 반복하여 재사용 할 수 있습니다. 구현 세부 사항은 나중에 사용할 때 추상화됩니다. 즉, 지시어에서 가능한 경우 각도 기능을 사용하여 도움을줍니다.

그렇다면 Angular IMO로 이것을 수행하는 가장 좋은 방법은 CSS 애니메이션을 사용하고 전환을 감지하기 위해 ngAnimate 후크를 사용하는 것입니다.

기본적으로 ngAnimate 서비스는 입력 할 때 클래스에 요소를 추가합니다. the documentation here을 참조하십시오.

관련 문제