Angular router user interface animation on parent view

Question

I have a nested state like:

.state('contacts', { url: '/contacts', views: { '': { templateURL: 'views/contacts.html', contacts: 'ContactsCtrl' } } }) .state('contacts.view', { url: '/contacts/:name', views: { '': { templateURL: 'views/contacts-details.html' } } }); 

contacts.html

 <section id="contacts-list"> <h1>This is a list of contacts</div> <article class="contacts" ng-repeat="contact in contacts">(...)</article> <ui-view/> </section> 

contacts-view.html

 <h2>{{ contact.name }}</h2> 

I can animate contacts-view.html ng-enter and ng-leave events, but I wanted to animate the contacts list # container to make the slide correct.

What would be a suitable way to approach this?

thanks

Answer 1

You can try:

Replace contacts-view.html with:

 <section id="contacts-list"> <h1>This is a list of contacts</div> <article class="contacts" ng-repeat="contact in contacts">(...)</article> <h2>{{ contact.name }}</h2> </section> 

and in your contacts.html write:

 <section id="contacts-list" ui-view> <h1>This is a list of contacts</div> <article class="contacts" ng-repeat="contact in contacts">(...)</article> </section> 

This should do the trick if you don't mind repeating code in your templates.

Edit:

Now I understand that you want to do a little more:

What about:

 <section id="contacts-list" ng-class="{ detail: $state.is('contacts.view')> <h1>This is a list of contacts</div> <article class="contacts" ng-repeat="contact in contacts">(...)</article> <ui-view /> </section> 

And then you add the add / remove animation classes to the part class. This should work without having to repeat or add / remove unnecessary elements in the DOM.