Angular2 Animation beim Laden und Page Transition

Derzeit zu versuchen, einige Animationen in meinem Angular2 Website mit ng2 ist gebaut animations Komponente. So weit ich habe durch den Winkel-2 Developer Guide - Animations in der Dokumentation. Mit, dass, obwohl ich habe ein paar Fragen, die ich hatte gehofft, die SO Gemeinschaft in der Lage sein könnte, zu unterstützen. Meine erste Frage/problem, das ich zu haben scheinen ist, dass die animation (von was ich sagen kann) nicht ausführen, beim laden der Seite. Es scheint zu laufen, völlig in Ordnung, wenn ich wechseln einen Blick, dann wieder zurück zu der Ansicht mit der animation. Dies ist der code, den ich verwende derzeit für die animation in Frage (kann ich die ganze Komponente, wenn gewünscht):

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

War ich unter dem Eindruck, dass die void => * würde meine DOM-element opacity:0 und sobald es eingegeben in zu der Ansicht, es wäre opacity:1. Ein weiteres problem, das ich zu haben scheinen ist, dass meine Navigationen scheinen nicht zu funktionieren auf dem Handy. Ich habe nicht tatsächlich zog Sie dann auf meinen server, aber lokal entwickeln und Suche auf meinem mobilen Gerät über Knoten localtunnel scheint es nicht zu sein, keine Animationen. Dies konnte sein, weil der seltsame localtunnel betreibt, also bin ich nicht allzu sehr besorgt darüber, dass, bis ich kann wirklich testen Sie es auf einem realen server. Hier ist die andere animation, die insbesondere als ich merkte, es funktionierte nicht auf meinem mobilen Gerät:

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'))
  ])
]

Ein letztes problem habe ich, das ist ein bekanntes Problem durch die Angular2 team-Animationen auf der router-Ansicht ändern. Es gibt derzeit einen SO Frage, die Adressen dieser und ein ticket auf der Angular2 repo (erwähnt in dem Kommentar von Günter Zöchbauer in der Frage ALSO). Mit, dass, ich war neugierig, ob es irgendwelche vorhanden workarounds? Durch einige kurze Forschung, es sah aus wie es kann zu einer Zeit implementiert wurden, eine ng-enter und ng-leave könnte man in Ihren css-Code für diese, aber was ich sagen kann, diese wurden abgeschafft. Noch müssen ein wenig mehr Forschung, so dass ich könnte falsch sein darüber.

Vielen Dank im Voraus für jede Hilfe!!!

UPDATE(7.7.16): Gut, also habe ich beschlossen, kommen zurück, um es und nach Herumspielen mit dem timing von der Seite laden-animation scheint es zu funktionieren. Wenn ich zu tun haben, etwa eine 1000ms animation, um bemerkt zu werden. Das bringt mich zu den Fragen (oder eher Gedanke), dass ich glaube, dass die animation ausgeführt, bevor der DOM vollständig geladen wurde. Die scheint ein bisschen seltsam.
Arbeite noch an der mobilen animation situation. Suche wie werde ich Einreichen, ein Problem auf der Github-repo im moment habe ich ein Durcheinander mit ihm ein gutes Stück und kann nicht scheinen, um es zu arbeiten. Auch es scheint nicht, jede Erwähnung von mobilen Animationen, die nicht arbeiten, für NG2.

UPDATE(7.13.16): Sieht aus wie die Angular2 team hat ein paar fixes geplant, um die release mit RC5, der sollte meine oben genannten Bedenken. Antwort meine eigene Frage und schließen.

InformationsquelleAutor wootencl | 2016-07-01
Schreibe einen Kommentar