एक

Question

के रूप में कई ui-बार देखा गया एनिमेट के लिए सर्वश्रेष्ठ अभ्यास मैं एक ऐप्लिकेशन है जो मूल रूप से इस

<div ui-view="header"> 
<div ui-view="main"> 
<div ui-view="footer"> 

अब की तरह लग रहा है, पाद एप्लिकेशन के सभी अलग-अलग राज्यों के लिए ही रहेगा, लेकिन हैडर बदल जाएगा कुछ राज्यों में, लेकिन कई राज्यों में सामग्री साझा करते हैं। केवल ui-view जो सभी राज्यों में बदल जाएगा ui-view="main" है।

वर्तमान में मेरी $stateProvider इस तरह (पादलेख अभी तक लागू नहीं) दिखता है:

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider.state('root',{ 
     url: '', 
     abstract: true, 
     views: { 
     'header': { 
      templateUrl: appHelper.views+'/header.html', 
     }, 
     } 
    }) 
    .state('root.home', { 
     url: '/', 
     views: { 
     'header': { 
      templateUrl: appHelper.views+'/header.html', 
     }, 
     'main@': { 
      templateUrl: appHelper.views+'/home.html', 
      controller: 'HomeController as homeVm', 
     } 
     }, 
     resolve: { 
     posts: function(dataService) { 
      return dataService.getPosts(); 
     }, 
     artists: function(dataService) { 
      return dataService.getArtists(); 
     } 
     } 
    }) 
    .state('root.artist', { 
     url: '/artist/:slug', 
     views: { 
     'header@': { 
      templateUrl: appHelper.views+'/artistHeader.html', 
      controller: 'ArtistController as artistVm', 
     }, 
     'main@': { 
      templateUrl: appHelper.views+'/artist.html', 
      controller: 'ArtistController as artistVm', 
     } 
     }, 
     resolve: { 
     artist: function($stateParams, dataService) { 
      return dataService.getArtist($stateParams.slug);  
     } 
     } 
    }); 
}]); 

अब तक तो अच्छा। लेकिन यहां पकड़ है। संक्रमण के दौरान मैं सभी ui-view एस को एक के रूप में एनिमेट करना चाहता हूं। बातें मेरे मामले में एकजुट दिखने के लिए (यह एक फीका एनीमेशन है) मैं उन्हें एक रैपिंग div में डाल दिया और कि div करना चाहते हैं में फीका (प्रत्येक अलग ui-view पर यह कर कुरूपता के सभी प्रकार का कारण होगा) फीका बाहर/करते हैं।

इस परिदृश्य में सबसे अच्छा अभ्यास क्या है?

मैं उन्हें एक ui-view में लपेट और ऊपर हुक कि $stateProvider किसी भी तरह में करते हैं (नेस्ट ui-view रों?)। क्या ऐसा करने के कोई अन्य तरीके हैं? क्या मैं $stateChange सुन सकता हूं और ngAnimate जैसे मेरे रैपर में कक्षाएं ui-view के साथ लागू कर सकता हूं? (तब बाहर फीका जब तक पूरी तरह से लुप्त होने से पहले एक सफल संकल्प के साथ बाहर फीका)।

मेरी Googling प्रयासों से ऐसा लगता है ui-view ज्यादा प्राथमिकता दी जाती है जब संक्रमण प्रकार की एनिमेशन से निपटने।

Answer 1

... संक्रमण के दौरान मैं सभी यूई-विचारों को एक के रूप में एनिमेट करना चाहता हूं। बातें मेरे मामले में एकजुट दिखने के लिए (यह एक फीका एनीमेशन है) मैं चाहते हैं उन्हें एक रैपिंग div में डाल दिया और/फीका में फीका बाहर करना है कि div के लिए (प्रत्येक अलग ui-व्यू पर यह कर सभी का कारण होगा बदसूरत के प्रकार)।

इस परिदृश्य में सबसे अच्छा तरीका क्या है?

विकल्प 1: का उपयोग करते हुए घटना हुक $stateChangeStart और $stateChangeSuccess

यह दृष्टिकोण के रूप में @ दाऊद टिप्पणी में उल्लेख किया है कुछ दुष्प्रभाव हो जाएगा। इसलिए ui-router तक राज्य संक्रमण वादे का प्रबंधन करने के लिए एक बेहतर तरीका के साथ आता है। संक्रमण होने से रोकने के लिए वर्तमान में यह event.preventDefault() पर निर्भर करता है।

असल में, ui-router आपके ui-view मार्ग परिवर्तन दृश्य-आउट को आने वाले व्यू-इन के साथ ही आग लगा देगा। तो क्या आप प्राप्त पिछले ui-view अभी भी दिखाई दे जबकि अगले ui-view प्रदान की गई है और आपको व्यू-बाहर एनिमेट कर रहे हैं तो पुराने दृश्य और नए के बीच ओवरलैप के कि संक्रमण की अवधि हो जाएगा। आप $stateProvider में,

इसी तरह के कारणों के लिए उन्हें एक और ui-view में लपेटकर और hooking उन्हें (में नया एक एनिमेट से पहले) नई ui-व्यू प्रतिपादन जब तक पुराने एक बाहर एनिमेट समाप्त हो गया है पर बंद धारण करने चाहिए होगा बुद्धिमान नहीं

विकल्प 2: (अनुशंसित) सीएसएस आधारित एनिमेशन

मैं ज्यादातर सीएसएस आधारित बदलाव के साथ जाने के लिए और आप को प्राप्त हो सकता है यह या तो

• प्रत्येक ui-view के लिए एक आम CSS वर्ग बताए और एनीमेशन लगाने से उस वर्ग पर।
• या <div> में तीन ui-view संलग्न करना (यदि आपको वास्तव में इसकी आवश्यकता है) और उस पर एनीमेशन लागू करें।

किसी भी तरह से, आप एक निकाय के रूप में सभी ui-views इलाज किया जाएगा और एनिमेट उन्हें बातें अधिक एकजुट देखो होगा।

HTML:

<div ui-view="header" ></div>  
<div ui-view="main" ></div> 
<div ui-view="footer" ></div> 

सीएसएस:

[ui-view].ng-enter { 
    animation: fadein 2s; 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

यहाँ एक काम plunkr आपके उपयोग के मामले जहां, मैं एक सार राज्य root और तीन नेस्टेड राज्यों root.home, root.artist और root.band है पर आधारित है। जबकि ui-view='main' सभी राज्यों में बदल जाता है, ui-view='footer' किसी भी और ui-view='header' राज्य में 'root.artist' के लिए परिवर्तन नहीं करता है। तथ्य यह है कि आप एनिमेशन को ट्रिगर करने के लिए सीएसएस आधारित .ng-enter और .ng-leave कक्षाओं का उपयोग कर रहे हैं, तो आप तकनीकी रूप से पिछले दृष्टिकोण वाले मुद्दों को दूर करते हैं।

$stateProvider 
     .state('root',{ 
      abstract:true, 
      views:{ 
       'header':{ //absolutely targets the 'header' view in root unnamed state. 
       templateUrl:'header.html' 
       }, 
       'footer':{ //absolutely targets the 'footer' view in root unnamed state. 
       templateUrl:'footer.html' 
       } 
      } 
     }) 
     .state('root.home',{ 
      views:{ 
       'main@':{ 
       templateUrl:'main.html' 
       }, 
      }   
     }) 
     .state('root.artist',{ 
      views:{ 
       'header@':{ 
       templateUrl:'artist-header.html' 
       }, 
       'main@':{ 
       templateUrl:'artist-main.html' 
       }, 
      }   
     }) 
     .state('root.band',{ 
      views:{ 
       'main@':{ 
       templateUrl:'band-main.html' 
       }, 
      }   
     })