Angular - Animation zwischen den Seiten (nach dem Ändern der Route)

Question

Ich bin noch neu in Angular 2 und fragte mich, ob es eine Möglichkeit gibt, eine Komponente "einfliegen" zu lassen und eine andere Komponente "fliegen" zu lassen. Nehmen wir an, ich habe 2 Komponenten: Test1Component und Test2Component und 2 Routen, die auf jeden von ihnen zeigen. Was wäre der beste Weg, dies zu tun?

Answer 1

https://github.com/angular/angular/issues/9845#issuecomment-235799008

RC5 will hopefully be out this week, if not then next week.

For now (with RC5) you will need to do this for every component that is routed to and you want to add animations to:

@Component({ 
    host: { 
    '[@routeAnimation]': 'true' 
    }, 
    animations: [ 
     trigger('routeAnimation', [ 
     transition('* => void', animate(...)), 
     transition('void => *', animate(...)) 
     ]) 
    ] 
}) 
class Cmp { } 

Once we get query() and $variables into animations then you can use <router-outlet> with the URL API that I wrote above.

Answer 2

fand ich einen großen Artikel über Animationen in Winkel 4.2 und up-Routing.

https://alligator.io/angular/animating-route-changes/?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_223