animazione angolare interfaccia utente del router sulla vista padre

Question

ho uno stato annidato come:

.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> 

contatti-view.html

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

Sono in grado per animare i contatti-view.html ng-enter e ng-leave, ma quello che volevo era animare il contenitore # -elenco contatti per fare una diapositiva all'effetto giusto .

Quale sarebbe il modo corretto per avvicinarsi a questo?

Grazie

Answer 1

si potrebbe provare:

Sostituire contatti-view.html con:

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

e nel tuo contacts.html scrittura:

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

che dovrebbe fare il trucco se non ti dispiace ripetere il codice nei tuoi modelli.

Edit:

ora capisco che cosa si vuole fare un po 'di più:

Che dire:

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

e quindi si aggiunge l'add/rimuovere le classi di animazione alla classe dettagli . Questo dovrebbe funzionare senza necessità di ripetizione o aggiunta/rimozione di elementi non necessari al DOM.