Animating (actually highlighting) updated values

[Richard Emerson]

Hi,

The new animation stuff in 1.1.x looks really cool.  It seems easy to apply animations to items which are being added or being removed, and maybe items which are being moved around too.

I'm interested in how to "animate" (actually highlight, as in jquery highlight) items which are being updated, i.e. items which are changing in place.  Imagine a <table> of prices for various things: you might want some slick animations when new things arrive in the table, but mostly what will happen is that the prices of some existing things will change, and when that happens you want the price to flash as it changes (or change colour, or briefly go bold, or whatever).

How would I do that with Angular?  Can it be done with the current animation support in 1.1.5?

Many thanks,

Richard

[Richard Emerson]

Any thoughts on this, anyone?  If I'm misunderstanding something really obvious, please let me know...

Thanks,

Richard

[Dave Gruska]

Not the answer you're looking for, but I've used a custom build of jQuery-UI that just included "highlight" to do this. Here's a Plunk from someone else that shows how to integrate it: http://plnkr.co/edit/FFBhPIRuT0NA2DZhtoAD?p=preview

I used it in an ng-repeat (i.e. <div highlight-on-change="{{i.DisplayName}}">{{i.DisplayName}}</div>) to highlight new items added to the array.

I tried a quick test with animations in 1.1.5, but couldn't get it working exactly right. Might give you something to go on, though:

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

Dave

[Dave Gruska]

Sorry, wrong Plunk for the animation test:

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

[Richard Emerson]

Your example highlights *new* items, but my question is about highlighting *updated* data for *existing* rows.  

Here's a fork of your Plunk that hopefully explains what I mean:

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

Thanks,

Richard

[Dave Gruska]

Looks like this works:

http://plnkr.co/edit/9KBGWX?p=preview

Dave

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/CQ4vCpgkwJw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Richard Emerson]

Hmm - yes it does appear to work... but why?

The docs for ng-repeat's 'move' animation say: "move - when an adjacent item is filtered out causing a reorder or when the item contents are reordered" (what does that last part mean?).

But actually it looks like the 'move' animation also applies to items which haven't moved, but have been updated, or replaced, or... what?

Maybe my question is just "what does 'move' really mean here, specifically?"  The ngAnimate/ngRepeat docs and the article at http://www.yearofmoo.com/2013/04/animation-in-angularjs.html don't explain it in detail.

And I guess a related question would be: what happens to items/rows which have moved relative to the top of the list, but haven't moved relative to each other.  For example, if my list was [1, 2, 4, 5, 6] and I inserted 3 between 2 and 4, then all of 4 5 and 6 have "moved" relative to the start of the list - do they get animated?

Perhaps 'move' should really be called 'change' or 'reorder' -- or even split into two separate animations, since changes and reorderings are likely to require quite different visual effects...?

[Dave Gruska]

Was wondering that myself. Maybe an "update" in an ng-repeat really is a delete followed by an add, causing temporary re-ordering? Would also be interesting to see if this approach works with the new ng-repeat "track by". I'll have to dig into this more when I get some time, as I'd like to use this myself once 1.2 comes out.

Dave