Bdtjtk

So I have a list of todos, each with a ripple, and when you click the todo I want to route the page to a new URL but I want the ripple animation to complete before this.

In Angular 4+ I can't find a way to do this easily, the only solution I have come up with so far is the following one, is there a "right" way to do this in Angular?

The component:

export class TodoListComponent {

  public todos = this.todoService.todos$;



  @ViewChildren(MatRipple) private ripples: QueryList<MatRipple>;



  constructor(private todoService: TodoService, private router: Router) {}



  public onGoTo(event: MouseEvent, index: number, todo: Todo): void {

    const enterDuration = 300;

    const exitDuration = 50;



    const rippleRef = this.ripples

      .toArray()

      [index].launch(event.clientX, event.clientY, {

        animation: {

          enterDuration,

          exitDuration,

        },

      });

    setTimeout(() => rippleRef.fadeOut, enterDuration);

    const animationDuration = enterDuration + exitDuration;

    setTimeout(() => this.router.navigate([todo.id]), animationDuration);

  }

}

The template:

<mat-list>

    <mat-list-item

      *ngFor="let todo of (todos | async); let index = index"

      mat-ripple

      [matRippleDisabled]="true"

    >

      <div class="Todo">

        <div class="Todo__Label" (click)="onGoTo($event, index, todo)">

          {{ todo.title }}

        </div>

      </div>

    </mat-list-item>

  </mat-list>

In Angular 4+ I can't find a way to do this easily, the only solution I have come up with so far is the following one, is there a "right" way to do this in Angular?

No, there is no Angular way because the MatRipple component isn't done in the Angular way. The ripple effects are managed manually by the RippleRenderer, and it doesn't look like it uses Angular animations.

https://github.com/angular/material2/blob/master/src/lib/core/ripple/ripple-renderer.ts

const rippleRef = this.ripples

  .toArray()

  [index].launch(event.clientX, event.clientY, {

    animation: {

      enterDuration,

      exitDuration,

    },

  });

The RippleRef object is returned by launch will tell you what the current state of the ripple is. There is a rippleRef.state property that will change overtime as the RippleRenderer performs the animation.

https://github.com/angular/material2/blob/master/src/lib/core/ripple/ripple-ref.ts

You can try to hack together an observable that will emit when the ripple animation is finished, but your only other alternative is to use setTimeout().

 interval(100)

    .pipe(

      map(()=>rippleRef.state),

      distinctUntilChanged(),

      filter(state=>state === RippleState.HIDDEN),

      first()

    ).subscribe(()=> {

         console.log('ripple animation finished');

    });

I'm not sure if the above will work, because the first state is HIDDEN and then it transitions back to HIDDEN. I assume that interval(100) will skip the first HIDDEN state.

Angular supported @animation.start and @animation.done to tap into animation events.

For example, you can use

(@routeAnimation.start)=onStart($event) and (@routeAnimation.done)=onDone($event) in your component.

You can find out more at Angular animations

Hope this help!

Example code:

import { Component, OnInit } from '@angular/core';

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





@Component({

  selector: 'app-first',

  template: `

    <div class="w9914420" [@routeAnimation]="show" 

        (@routeAnimation.start)="onStart($event)"

        (@routeAnimation.done)="onDone($event)">

        <h2>

           first-component Works!

        </h2>

  </div>

  `,

  host: {

    '[@routeAnimation]': 'true',

    '[style.display]': "'block'",

    '[style.position]': "'absolute'"

  },

  animations: [

    trigger('routeAnimation', [

      state('*', style({transform: 'translateX(0)', opacity: 1})),

      transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),

      transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))

    ])

  ]

})

export class FirstComponent implements OnInit {



  constructor() { }



  ngOnInit() {



  }



  onStart($event) {

    // call this function at start of the animation.

    console.log('starting animation');

  }

  

  onDone($event) {

    // call this function at the end of the animation.

    console.log('the end of the animation');

  }



}