CODEWITHSUNDEEP
javascriptangularjsanimationinheritance
Sanish Joseph
Sanish Joseph

Reputation: 2256

How to apply animations to multiple components with a base component in Angular2?

In my app when a component loads from menu using routing, I wanted to use some animations. I was able to do it with an angular animation successfully. I had to apply the animation in the individual component to achieve this. I need to know whether there is a better way to apply animations to a group of components or components inheriting from a specific base class?

Currently I have applied my animation like, 

import { Component, OnInit } from '@angular/core';
import { routerTransition } from "../animations/animations";

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  animations: [routerTransition()],
  host: {'[@routerTransition]': ''}
})
export class BaseComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

animation code,

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

export function routerTransition() {
  return slideToLeft();
}

function slideToLeft() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    transition(':enter', [  // before 2.1: transition('void => *', [
      style({transform: 'translateX(100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [  // before 2.1: transition('* => void', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ]);
}

What I tried:

I tried to create a base-component, applied animation properties there, and extended the base-component in the other components needed. Animation stopped working after that.

Please let me know if we can reuse the animations without applying it on individual components.

Upvotes: 5

Views: 5190

Answers (1)

fr0
fr0

Reputation: 1175

Since version 4.2, Angular supports animating multiple elements via the newer query() and stagger() features in the animation DSL.

This article explains the new features: https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html

Upvotes: 1

Related Questions