Angular Docs about auto-animate

[Waterstraal]

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'];
}

[justin-schroeder]

That would be great. We don't plan to touch angular ourselves so it needs to be a submission from someone like yourself anyway :)

[Waterstraal]

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

[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'];
}

Wow Nice! Maybe you can create a Pull Request?

[Waterstraal]

Sorry for the delay, I just got around for it. I created a PR that add Angular support.