Open danielehrhardt opened 2 years ago
That would be great. We don't plan to touch angular ourselves so it needs to be a submission from someone like yourself anyway :)
I also came looking for Angular support :)
To be fair, the docs do say this:
You can use it with React, Vue, Svelte, or any other JavaScript application
That claim needs an asterisk ;).
But it shouldn't be impossible to create an auto-animate Angular directive @danielehrhardt
I created a quick POC:
import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
import autoAnimate, { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';
@Directive({
selector: '[auto-animate]'
})
export class AutoAnimateDirective implements AfterViewInit {
@Input() options: Partial<AutoAnimateOptions> | AutoAnimationPlugin = {}
constructor(private el: ElementRef) {}
ngAfterViewInit(): void {
autoAnimate(this.el.nativeElement, this.options);
}
}
Works like a charm:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ul auto-animate [options]="{duration: 500}">
<li *ngFor="let item of items">{{item}}</li>
</ul>
<button (click)="this.items.push('🍒 Cherry')">Add fruit</button>
`
})
export class AppComponent {
items: string[] = ['🍎 Apple', '🍌 Banana', '🍓 Strawberry'];
}
I created a quick POC:
import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core'; import autoAnimate, { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate'; @Directive({ selector: '[auto-animate]' }) export class AutoAnimateDirective implements AfterViewInit { @Input() options: Partial<AutoAnimateOptions> | AutoAnimationPlugin = {} constructor(private el: ElementRef) {} ngAfterViewInit(): void { autoAnimate(this.el.nativeElement, this.options); } }
Works like a charm:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <ul auto-animate [options]="{duration: 500}"> <li *ngFor="let item of items">{{item}}</li> </ul> <button (click)="this.items.push('🍒 Cherry')">Add fruit</button> ` }) export class AppComponent { items: string[] = ['🍎 Apple', '🍌 Banana', '🍓 Strawberry']; }
Wow Nice! Maybe you can create a Pull Request?
Sorry for the delay, I just got around for it. I created a PR that add Angular support.
Can this lib work in Angular? Maybe i will add a Pull Request for Docs for Angular or a Wrapper what do you think?