Hi,
I want to realize page transitions in an angular2 application. I tried
several approaches:
1. My first approach was to implement the OnActivate interface and then add
some classes to my component root object. This works fine, but has some
problems: First, it is the same code for any component, second it is a mix
of logic and UI control inside my component, what I dont like
2. To improve the first problem I made a base class:
export class AnimatedComponent implements OnDeactivate, OnActivate {
constructor(private elementRef: ElementRef) { }
...
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
if (prev && !this.isSameRoute(next.urlPath, prev.urlPath)) {
this.makeTransition('activate', this.activateDelay());
}
}
eouterOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
if (!this.isSameRoute(next.urlPath, prev.urlPath)) {
return this.makeTransition('deactivate', this.deactiveDelay());
} else {
return null;
}
}
private makeTransition(className: string, delay: number) {
const $child = $(this.elementRef.nativeElement).find('.page').first();
$child.addClass(className);
return new Promise(resolve => setTimeout(() => {
$child.removeClass(className);
resolve(1);
}, delay));
}
}
It works so far, but I still dont like it because I have to add it to the
component and cannot implement transitions with jscript.
I would like to make some directives and implement OnActivate in the
directives. Something like would be cool:
<page activate="slideIn" deactivate="fadeOut">
<nav>
...
</nav>
<main>
...
</main>
</page>
But I dont know how to deal with OnActivate in the directives.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
