Dynamic lookup of ng-animate value

[pennersr]

With angular-ui's ui-router,I was trying to modify the view animation dynamically, e.g. by using one of:

ng-animate="scopeVariable"
ng-animate="scopeMethod()"

instead of the fixed:

ng-animate="'fade'"

While this works, the scope references are only evaluated once at link time, hence, changing those dynamically did not work.

So I submitted a pull request to lookup the ng-animate value dynamically. However, the maintainers are correctly stating that ui-view copied its ng-animate lookup behavior from the core Angular ng-view, and hence are hesitant to add support for this.

Could anyone please let me know what the official standpoint is on looking up the ng-animate value dynamically?

See angular-ui/ui-router#96 for the full discussion.

[jeme]

Here is a fiddle for ng-view where I am trying to do what I think @pennersr wants, but isn't working:

http://jsfiddle.net/nFhX8/18/

[alexhocksween]

I have been trying to do the same thing. See #2464.

I wanted to animate the views in an application where the user can go back and forth between different steps. If the views always slide one way, it looks a little silly.

[jmeiss]

+1

https://groups.google.com/forum/#!topic/angular/GzsaiWIGy-I

[rynz]

👍 This is definitely something we need too.

It would also be nice if the method passed in the ng-animate directive also had a reference to the transition object with the ability to call cancel() or something similar to destroy any current transition in progress.

[ncintra]

Just checked @jmeiss 's link and apparently there's a way to make this work.

See http://jsfiddle.net/LMEZ4/

[rynz]

@ncintra That helps but that's purely CSS to decide the direction based on a parent selector. Not even sure why you have a direction() in the ng-click as it's not used?

Taking @jeme example for this solution to work you would have to modify the DOM to set a new CSS parent. Where as everyone wants to be able to set the animation via a $scope variable or function return without touching the DOM.

[ncintra]

Hi @SparkiO , I see what you mean! Thanks for the clarification :)

[revolunet]

some solutions examples here : http://blog.revolunet.com/blog/2013/04/30/angularjs-animations-mobile-applications/

[rynz]

@revolunet Again that's the same as what @ncintra posted and isn't a viable solution to the problem @pennersr proposes followed by @jeme jsfiddle.

Also, you should never touch the DOM from a Controller, it's a very specific Angular rule @mhevery discusses in many meetups/youtube events.

Those solutions require CSS classes to decide the animation where as if you look at @jeme jsfiddle the problem is to support dynamic lookups of ng-animate value, not manipulate DOM.

[revolunet]

yes, i didnt get @ncintra jsfiddle was the one from my article :)

the first example in the article just involves a <style ng-bind-html-unsafe="style"></style> to handle the direction change, no need to wrap the ng-view in another div.

[osimicek]

+1

[benpender]

+1

[jeme]

Updated the fiddle with an ng-include to show this is also broken.

Also made some changes and fixed the fiddle so all the animations actually works (not entirely as you might wan't them to work, but at least you can see that fade fades, wave comes in from the side, view comes in from the side close to the center and fades, slide drops from the top)

Also changed so that it is a Select box that is used to select...

Starting with view: http://jsfiddle.net/nFhX8/66/
Starting with slide: http://jsfiddle.net/nFhX8/67/
Starting with fade: http://jsfiddle.net/nFhX8/68/
Starting with wave: http://jsfiddle.net/nFhX8/69/

[damrbaby]

Looks like this was fixed in the latest 1.1.5 release!

[pennersr]

Confirmative -- here's an updated fiddle of the one @jeme made, but now using 1.1.5. It works!

http://jsfiddle.net/fEbgM/1/

[pkozlowski-opensource]

@damrbaby @pennersr Great, thnx for catching this. This can be closed then!

[Pitel]

It doesn't work with latest Angular, where ng-animate is not present!

[matsko]

@Pitel use ngClass instead.

[doorman02]

Hi, @matsko thanks for the update. I tried dynamic lookup using ng-class in 1.2.0-rc.2 but it doesn´t work.
I modified @Pitel sample code to use ng-class and it does not work either: http://jsfiddle.net/azTT3/
Maybe this is already fixed in 1.2.0-rc.3 ?

[matsko]

@doorman02 the ngClass toggling works, it was just your CSS code that wasn't following the new naming structure:

http://jsfiddle.net/5G6VQ/

[doorman02]

@matsko Thanks it´s working now :)