angular2 Komponente transition animation

Zu machen, wie die Seite transition animation in angular2 ?

Versuche ich, dies ist der code aber nicht funktioniert 

@Component({
   selector:'myPagefirstPage', 
})

@View({
   template: `<div  class="view-animate ng-animate" > 
                 <h1>First Page</h1>
              </div>`

Und ich habe meine animation Klasse in der css-Datei wie folgt 

.view-animate.ng-enter {....}

Aber es funktioniert nicht

  • Ich bin nicht sicher, dass die animation implementiert ist, überhaupt noch als alpha-48. In jedem Fall würde ich davon ausgehen, Sie müssen importieren ANIMATION_DIRECTIVES oder so etwas wie, dass Sie in einer bestimmten Komponente
InformationsquelleAutor Bahgat Mashaly | 2015-12-07
  1. 4

    Als beta 15, basic-übergänge mit z.B. .ng-enter und .ng-enter-active funktioniert. Beachten Sie, dass Sie müssen hinzufügen, die ng-animate Klasse, um das animierte element. Sehen Sie diese plunkr für ein Beispiel http://plnkr.co/edit/WcH3ndMN0HOnK2IwOCev?p=preview

    Beachten Sie jedoch, dass ng-leave wird nicht unterstützt, der nun als DOM node entfernt wird, bevor out-animation ist fertig (siehe https://github.com/angular/angular/pull/6768)

    InformationsquelleAutor staeke
  2. 4

    Dezember 2015, Animationen werden nicht umgesetzt in den Winkel-2-beta-release, und sind aufgrund der in der finalen Version.

    http://angularjs.blogspot.com.au/2015/12/angular-2-beta.html

    Was kommt als Nächstes?

    Wir sind schon fleißig an den Verbesserungen zu bewegen Eckig
    2 zu seiner vollen und endgültigen Freigabe. Während wir werden viele kleine
    Verbesserungen, die großen für die final sind:

    1. Reduzierung Winkel-2 payload-Größe.
    2. Machen die Eckige CLI nutzbar von Ende zu Ende über den gesamten Entwicklungsprozess.
    3. Die Schaffung eines Entwickler-freundliche route-definition und link-API für die Komponente Router.
    4. Unterstützung für Animationen.
    5. I18n und L10n unterstützen.

    Edit: Animationen werden nun in - http://angularjs.blogspot.com.au/2016/06/rc2-now-available.html

    RC2 Jetzt Verfügbar

    Heute sind wir glücklich, zu verkünden, dass wir Versand-Winkel-2.0.0-rc2.

    Diese Version enthält:

    1. Animations-Framework

    ...

    InformationsquelleAutor twsaef
  3. 3

    Für diejenigen, die mindestens mit Winkel-2.0.0-rc2, wir können hinzufügen, ein übergang Animationen (fadeIn zum Beispiel) zwischen unseren Komponenten durch hinzufügen eines div dass wickeln unsere Komponente Ansicht wie diese : 

    <div @fadeIn="'in'">
       ... Component HTML ...
</div>

    Und in der Komponente, müssen wir die animation fadeIn : 

    @Component({
    ...
    animations: [
        trigger('fadeIn', [
            state('*', style({'opacity': '0'})),
            transition('* => in', [animate('800ms linear', style({'opacity': '1'}))])
        ])
    ]

    [BEARBEITEN] eine alternative Möglichkeit, ohne mithilfe der Zustand ist wie folgt:

    <div @fadeIn>
       ... Component HTML ...
</div>

    Und der Komponente:

    @Component({
    ...
    animations: [
        trigger('fadeIn', [
            state('*', style({'opacity': 1})),
            transition('void => *', [
                style({'opacity': 0}),
                animate('800ms linear')
            ])
        ])
    ]
    InformationsquelleAutor Stéphane Eintrazi
  4. 1

    Winkel 2 endgültige Lösung

    Wie bereits von @JeanMel, können wir die @routeAnimation built-in-Richtlinie zu erreichen. Siehe meine Antwort hier umfasst ein plunk.

    InformationsquelleAutor Stephen Paul
  5. 0

    Für eine Seite übergang, können Sie sich auf eine routeAnimation

    Animations.ts

    import {style, animate, transition, state, trigger} from '@angular/core';

export default [
  trigger('routeAnimation', [
    state('*', style({opacity: 1, height: '100%'})),
    transition('void => *', [
      style({opacity: 0, height: '100%'}),
      animate(200)
    ]),
    transition('* => void', animate(0, style({opacity: 0, height: '100%'})))
  ])
];

    Dann in Ihre YourComponent.ts

    import animations from './Animations';
@Component({
  ...
  animations: animations
})
export class YourComponent {
  @HostBinding('@routeAnimation') public routeAnimation:void;
  ...
}

    Optional: Dieser wird davon ausgegangen, dass routing.ts - Datei sieht wie

    import {RouterModule}  from '@angular/router';
import {ModuleWithProviders} from '@angular/core';
import {YourComponent} from './YourComponent';

export const routing:ModuleWithProviders = RouterModule.forChild([
  {path: "aPath", component: YourComponent}
]);
    InformationsquelleAutor Flavien Volken
Schreibe einen Kommentar