Angular animations without ng animation, maybe?

Question

In some cases, I use angular version 1.0.6 . And there is no amazing built-in ng animation ...

My question is: do you have examples of page transitions with custom directives?

In my case, I get data from the server, and when I received the data, I needed to show div elements smoothly on the page (smth like transiotion from opacity: 0 to opacity: 1 ).

Thanks!

Answer 1

• Create a directive called ng-show-anim, bind myVariable from the parent scope to the scope.

  <div ng-show-anim="myVariable" />

• In the directive add $ watch to 'myVariable'

• In the $ watch function, use jquery animations to show that div.

Answer 2

You can use the angular ui jQuery passthrough function and bind custom animations as directives for your element.
Here is a very simple example:

 <ul ng-model="items"> <li ng-repeat="item in items" ui-jq="fadeIn"></li> </ul>