0

I am new to Angular2 and I am trying to specify two shared animation effects on the same component. I know how to place a singular shared animation on a component but I can't figure-out the syntax on how to add multi shared animation on the same component.

I have a setup component that has both rout Animation effect (when the component is displayed) and a fade-in-out effect regarding a green toast (A message fade in and out when the submission after a successful submitted)

I know that in the component annotation I need to specify the animations.

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

import {NavigationAnimation} from '../../shared/animations/navigation/navigationAnimation'; // path to animation
import { FadeInOutAnimation} from '../../shared/animations/fadeInOut/fadeInOut';   // path to animation

@Component({
    selector: 'setup-app',
    templateUrl: 'app/setup/setup.component/setup.component.html',
    styleUrls: ['app/setup/setup.component/setup.component.css', 'bower_components/semantic/dist/components/form.min.css', 'bower_components/semantic/dist/components/dropdown.css'],
    host: { '[@routeAnimation]': 'true' },
     animations:  NavigationAnimation.page \\  I can get either the NavigationAnimation.page to work or the FadeInOutAnimation.effect but I can get the two of them to work at the same time.
})
Daniel Izhar
  • 130
  • 1
  • 12
  • I think you need to do something like [this](https://angular.io/docs/ts/latest/guide/animations.html#!#parallel-animation-groups) - combine them in one – sTx Feb 09 '17 at 14:48
  • Really? Is that the best that angular 2 can do? – Daniel Izhar Feb 09 '17 at 15:39
  • I think you can use 2 trigger variables like this: ` host: { '[@routeAnimation]', '[@animation2]'}` - it should work to have multiple animations declared but don't know if it works to have them for the same element; Try to declare them here(in component) with `trigger` - look [here](http://stackoverflow.com/questions/39091888/multiple-animation-triggers-in-angular2-component) something similar – sTx Feb 09 '17 at 15:51

0 Answers0