Angular UI Router 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'm able to animate the contacts-view.html ng-enter and ng-leave events but what I wanted was to animate the #contacts-list container in order to make a slide to right effect.

What would be the proper way to approach this?

Thanks

Answer 1

You could 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>

That should do the trick if you don't mind code repetition in your templates.

Edit:

I understand now what you want to do a bit 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 detail class. That should work without the need of repetition or adding/removing unnecessary elements to the DOM.