Le migliori pratiche per l'animazione più ui-viste come uno

Question

Ho un app che appare fondamentalmente come questo

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

Ora, il piè di pagina rimarrà lo stesso per tutti i diversi stati della app, ma l'intestazione cambierà in alcuni stati, ma anche condividere contenuti in molti stati. L'unico ui-view che cambierà in tutti gli stati è ui-view="main".

Attualmente la mia $stateProvider assomiglia a questo (piè di pagina non ancora implementata):

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);  
     } 
     } 
    }); 
}]); 

Fin qui, tutto bene. Ma ecco il trucco. Durante le transizioni voglio animare tutti i ui-view s come uno. Per rendere le cose un aspetto coeso nel mio caso (è un'animazione dissolvenza) vorrei metterle in un div wrapping e fare in modo che il div diventi dissolvenza/dissolvenza (farlo su ogni diverso ui-view causerà tutti i tipi di bruttezza).

Qual è la migliore pratica in questo scenario?

Li ho avvolti in un ui-view e lo collego in qualche modo nello $stateProvider (nidificato ui-view s?). Ci sono altri modi per farlo? Posso ascoltare $stateChange e applicare classi al mio wrapper come ngAnimate con un ui-view? (svanire poi attendere fino a quando non svanisce completamente con una risoluzione riuscita prima di dissolversi).

Dai miei sforzi su Google sembra che ui-view sia molto preferito quando si gestiscono le animazioni del tipo di transizione.

Answer 1

... Durante le transizioni, desidero animare tutti i punti di vista come uno. Per rendere le cose coerenti nel mio caso (è un'animazione dissolvenza) Mi piacerebbe metterle in un div wrapping e fare in modo che div diva fade out/dissolvenza in (farlo su ogni diversa interfaccia utente causerà tutto tipi di uguaglianza ).

Qual è la migliore pratica in questo scenario?

Opzione 1: Uso ganci eventi $stateChangeStart e $stateChangeSuccess

Questo approccio avrebbe alcuni effetti collaterali, come @ David accennato nei commenti. Quindi evitalo fino a quando lo ui-router non ti offre un modo migliore per gestire la promessa della transizione di stato. Attualmente si basa su event.preventDefault() per impedire che la transizione accada.

Fondamentalmente, ui-router genererà la visualizzazione del cambio di itinerario ui-view contemporaneamente alla visualizzazione in ingresso. Quindi quello che ottieni è il precedente ui-view ancora visibile mentre il successivo ui-view viene visualizzato e se stai animando la visualizzazione, ci sarà quella durata della transizione di sovrapposizione tra la vecchia visualizzazione e la nuova. Si dovrebbe guardare in tenendo a bada sulla rendendo la nuova interfaccia utente con vista fino a quando il vecchio è finito animare out (prima di animare la nuova in)

Per ragioni analoghe, avvolgendoli in un altro ui-view e aggancio in su nella $stateProvider sarebbe non essere saggio

Opzione 2: CSS basato animazioni (consigliato)

io per lo più vado con le transizioni CSS based e si può raggiungere questo obiettivo sia con

• l'assegnazione di una classe CSS comune a ogni ui-view e l'applicazione di animazione in quella classe
• o allegando i tre ui-view in un <div> (se proprio necessario) e applicare l'animazione su di esso.

In entrambi i casi, si tratterebbe di tutto il ui-views come una singola entità e l'animazione li renderebbe le cose più coese.

HTML:

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

CSS:

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

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

Ecco un lavoro plunkr, sulla base di caso d'uso in cui, ho uno stato astratto root e tre stati annidati root.home, root.artist e root.band. Mentre lo ui-view='main' viene modificato in tutti gli stati, ui-view='footer' non cambia in nessuna e ui-view='header' modifiche per lo stato 'root.artist'. Il fatto che si stiano utilizzando classi basate su CSS .ng-enter e .ng-leave per attivare le animazioni, si risolvono tecnicamente i problemi con l'approccio precedente.

$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' 
       }, 
      }   
     })