Obecnie próbuję zaimplementować niektóre animacje w mojej witrynie Angular2 za pomocą komponentu ng2 wbudowanego w komponent animations. Do tej pory pracowałem poprzez Angular 2 Developer Guide - Animations podany w dokumentacji. Mimo to natknąłem się na kilka pytań, mam nadzieję, że społeczność SO może być w stanie pomóc. Moje pierwsze pytanie/problem wydaje mi się, że animacja (z tego co wiem) nie działa na ładowanie strony. Wydaje się, że działa idealnie, jeśli przełączyłem się na widok, a następnie powróciłem do widoku z animacją. Jest to kod obecnie używam do animacji w pytaniu (mogę dostarczyć cały komponent w razie potrzeby):Animacja Angular2 przy ładowaniu i przechodzeniu strony
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}))
])
])
]
Byłem pod wrażeniem, że void => * by ustawić mój elementu DOM do opacity:0 i po nim wprowadzono in do widoku, który byłby opacity:1. Innym problemem, który wydaje mi się być, jest to, że moje nawigacje nie działają na urządzeniach mobilnych. Tak naprawdę nie przeniosłem ich na mój serwer, ale rozwijając się lokalnie i patrząc na moje urządzenie mobilne za pośrednictwem węzła localtunnel, nie ma żadnych animacji. Może tak być dlatego, że działa dziwny sposób, więc nie przejmuję się tym zbytnio, dopóki naprawdę nie przetestuję go na prawdziwym serwerze. Oto druga animacja jest w szczególności, gdy zauważyłem, że nie działa na moim urządzeniu przenośnym:
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'))
])
]
Jeden ostatni problem miewam który jest znany problem przez zespół Angular2 jest animacje na widoku routera zmiana. Obecnie istnieje SO question, który zajmuje się tym i biletem na repo Angular2 (wspomniane w komentarzu Güntera Zöchbauera w pytaniu SO). W związku z tym byłem ciekawy, czy były jakieś obecne obejścia? Przez kilka krótkich badań wyglądało na to, że w pewnym momencie mogły zostać zaimplementowane ng-enter i ng-leave, które można by wykorzystać w ich css do tego, ale z tego, co mogę powiedzieć, te zostały wycofane. Nadal trzeba zrobić trochę więcej badań, więc mogłem się mylić.
Z góry dziękuję za pomoc!
AKTUALIZACJA (7.7.16): W porządku, więc postanowiłem wrócić do niego i po zadzieraniu z czasem animacji ładowania strony wygląda na to, że działa. Chociaż muszę zrobić z grubsza animację 1000ms, żeby ją zauważyć. Co prowadzi mnie do pytań (lub więcej myśli), że wierzę, że animacja zaczyna się wykonywać, zanim DOM zostanie w pełni załadowany. Co wydaje się trochę dziwne. Nadal pracuję nad mobilną animacją. Wygląda na to, że w tej chwili będę zgłaszał problem związany z repozytorium Githuba, ponieważ trochę go zepsułem i nie mogę sprawić, żeby działał. Również nie ma żadnej wzmianki o animacjach mobilnych, które nie działają dla NG2.
UPDATE (7.13.16): Wygląda na to, że zespół Angular2 przygotował kilka poprawek do wydania z RC5, które powinny rozwiązać moje powyższe zastrzeżenia. Chcemy odpowiedzieć na moje własne pytanie i zamknąć.