जनक दृश्य पर कोणीय यूआई रूटर एनीमेशन

Question

मैं की तरह एक नेस्टेड राज्य है:

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

संपर्कों-view.html

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

मैं कर सकती हूं संपर्क-view.html ng-enter और ng-leave ईवेंट को एनिमेट करने के लिए, लेकिन मैं जो चाहता था वह # संपर्क-सूची कंटेनर को सही प्रभाव में स्लाइड बनाने के लिए एनिमेट करना था ।

इस तक पहुंचने का उचित तरीका क्या होगा?

धन्यवाद

Answer 1

आप की कोशिश कर सकते:

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

और अपने contacts.html लिखने में:

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

कि क्या करना चाहिए

के साथ बदलें संपर्कों-view.html यदि आप अपने टेम्पलेट्स में कोड पुनरावृत्ति को ध्यान में रखते हैं तो चाल।

संपादित करें:

अब मैं समझ क्या आप थोड़ा और क्या करना चाहते हैं:

के बारे में क्या:

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

और फिर आप जोड़ें/विस्तार वर्ग के लिए एनीमेशन वर्गों को दूर । इसे पुनरावृत्ति की आवश्यकता के बिना काम करना चाहिए या डीओएम को अनावश्यक तत्वों को जोड़ना/हटा देना चाहिए।