1

I want to do simple sequential effects using angularjs. I can do this in jquery, but I just don't know what path to follow to do the same thing using angularjs.

To make things concrete, here is a simple jquery based sequential effect that I would like to create using angularjs. When we click on a tag, the text value of the another tag is sequentially set to each element of an array for a fixed duration. A jsfiddle prototype of this is at

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

whose javascript code is 

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);

To do the same thing in angular, I am frankly not sure even what tree to start barking up.

From my searches so far, I found discussion about chaining promises using the $q service. Is this what I should be thinking about? Can anyone point me to a working example? If this is not the best way to proceed, is something like $animate more appropriate? Is there something else that I should be considering? Any pointers to a better way would be appreciated.

P.s. This question is based on following the advice of this answer that states "And when you come to a problem that you think you know how to solve in jQuery already, before you reach for the $, try to think about how to do it within the confines the AngularJS. If you don't know, ask!" I have a problem that I know how to solve in jquery. I want to do the angular way. I have tried to think about the problem and given my lack of experience with angularjs, I am at a loss and so that's why I am asking.

Community
  • 1
  • 1
mjandrews
  • 2,392
  • 4
  • 22
  • 39
  • Have you looked at the documentation for $animate? https://docs.angularjs.org/api/ngAnimate/service/$animate – Andrew Church May 17 '14 at 19:45
  • @AndrewChurch I know of, but have not explored, $animate. It and $q both cropped up as possibilities in my search on this topic. I now have edited my initial question to mention $animate explicitly. If $animate is the way to go for something like the effects I am considering, then great and I will dig it. – mjandrews May 17 '14 at 20:33
  • @mjandrews $q is how you apply sequential effects when asynchronous operations are involved, promises are insanely cool but I don't think they'd help you here very much. – Benjamin Gruenbaum May 17 '14 at 20:38

2 Answers2

1

The AngularJS way is completely agnostic to how you perform animations and DOM manipulations as long as you keep them in directives. Once you perform your animation on the component, you can reuse that component over and over with the directive and other directives - and the implementation detail is abstracted from you in future uses. That said, in your directives - use Angular features to help you when you can.

That said, the best practices way to do this with Angular IMO is with CSS animations and use ngAnimate hooks in order to detect transitions.

Basically the ngAnimate service adds classes to your elements when they are entered etc. See the documentation here.

Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
0

Here's a simple example using ngAnimate and setinterval

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

and another using a directive and your jquery animation code

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

fatlinesofcode
  • 1,647
  • 18
  • 22