Attualmente sto provando a implementare alcune animazioni nel mio sito Angular2 utilizzando il componente integrato ng2 animations. Finora ho lavorato su Angular 2 Developer Guide - Animations fornito nella documentazione. Detto questo, mi sono imbattuto in alcune domande che speravo che la comunità SO potesse fornire assistenza. La mia prima domanda/problema che ho riscontrato è che l'animazione (da quello che posso dire) non viene eseguita su caricamento della pagina. Sembra funzionare perfettamente bene se si passa a una vista e poi si torna alla vista con l'animazione. Questo è il codice Attualmente sto usando per l'animazione in questione (posso fornire l'intero componente se lo si desidera):Angular2 Animation on Load e Transition Page
animations: [
trigger('kissState', [
state('in', style({opacity: 1})),
transition('void => *', [
style({opacity: 0}),
animate('250ms ease-in-out')
]),
transition('* => void', [
animate('250ms ease-in-out', style({opacity: 0}))
])
])
]
Ho avuto l'impressione che il void => * sarebbe impostare il mio elemento DOM per opacity:0 e una volta che inserito in alla vista sarebbe opacity:1. Un altro problema che ho riscontrato è che le mie navigazioni non sembrano funzionare sui dispositivi mobili. Non li ho ancora spostati sul mio server ma sviluppandoli localmente e guardando sul mio dispositivo mobile tramite il nodo localtunnel non sembrano esserci animazioni. Questo potrebbe essere dovuto al fatto che lo strano modo in cui funziona localtunnel non mi preoccupa troppo per questo finché non riesco a verificarlo su un server reale. Ecco l'altra di animazione che, in particolare, è quando ho notato che non funzionava sul mio dispositivo mobile:
animations: [
trigger('offScreenMenu', [
state('inactive', style({
opacity: 0,
zIndex: -10
})),
state('active', style({
backgroundColor: 'rgba(255, 255, 255, 0.8)',
zIndex: 10
})),
transition('inactive => active', animate('250ms ease-in')),
transition('active => inactive', animate('250ms ease-out'))
])
]
Un ultimo problema ho avuto, che è un problema noto da parte del team Angular2 è animazioni in mostra router modificare. Al momento c'è un SO question che indirizza questo e un ticket sul repository Angular2 (menzionato nel commento di Günter Zöchbauer nella domanda SO). Con questo, ero curioso di sapere se c'erano dei rimedi? Attraverso alcune brevi ricerche è sembrato che una volta sia stato implementato uno ng-enter e ng-leave che si possa usare all'interno del proprio css per questo, ma da quello che posso dire questi sono stati eliminati. Devo fare ancora un po 'di ricerca, quindi potrei sbagliarmi.
Grazie in anticipo per qualsiasi aiuto!
UPDATE (7.7.16): OK, ho deciso di tornare su di esso e dopo aver interferito con i tempi dell'animazione caricamento della pagina sembra funzionare. Anche se devo fare approssimativamente un'animazione 1000ms per farla notare. Il che mi porta alle domande (o altre riflessioni) che ritengo che l'animazione inizi a essere eseguita prima che il DOM sia completamente caricato. Che sembrerebbe un po 'strano. Ancora lavorando sulla situazione di animazione mobile. Sembra che presenterò un problema al repository Github al momento, dato che mi sono divertito un po 'e non riesco a farlo funzionare. Inoltre non sembra esserci alcuna menzione delle animazioni mobili che non funzionano per NG2.
UPDATE (7.13.16): Sembra che il team di Angular2 abbia apportato alcune correzioni da rilasciare con RC5 che dovrebbero risolvere i miei dubbi di cui sopra. Sto per rispondere alla mia domanda e chiudere.