How to use input parameters in angular 6 animation?

Question

In this animation I try to decrease the width from 100% to a dynamic start width "toolWidth" (percent). The variable "toolWidth" can be set by the user in the app.

Animation:

trigger('testAnimation', [
    state('opened', style({
      'width': '100%'
    })),
    state('*', style({
      'width': '{{toolWidth}}%'
    }), {params: {toolWidth: 30}}),
    transition('* => opened', animate('600ms ease-in')),
    transition('opened => *', animate('600ms ease-out'))
  ])

Template:

<div [@testAnimation]="{value: state, params: {toolWidth: newToolWidth}}"></div>

Problem:

If the variable "state" is changed to "closed", nothing happens. It seems that the animation does not get triggered with the new state "opened". The initial value of "state" is "opened". The variable "newToolWidth" is set by the user. If I don't use parameters it works very well.

Did I miss something?

It works now. I set false initial values and because of this animation seems not working. — julianpoemp
– julianpoemp, Commented Jun 12, 2018 at 9:00
May be useful to others to follow this tutorial : yearofmoo.com/2017/06/new-wave-of-animation-features.html — Simon_Weaver
– Simon_Weaver, Commented Aug 28, 2018 at 5:06
@Simon_Weaver Except the linked article is wrong in all exemples of code relating to params as it misses to use the params sub-object :/ — Jscti
– Jscti, Commented Sep 12, 2018 at 13:19

Jette · Accepted Answer · 2018-11-11 20:51:49Z

19

For others passing by this question... This is how I make reusable animations in Angular 7. It may also apply to Angular 6:

stackblitz demo here

animations.ts

Create your animations in a separate file e.g. animations.ts. Note the 'params' lines. These are merely default values, which can be changed at runtime:

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

export const slidingDoorAnimation = trigger('slidingDoorAnimation', 
  [
    state('in', 
      style({ width: '{{ inWidth }}', overflow:'hidden'}),
      { params: { inWidth: '250px'}}
    ),
    state('out', 
      style({ width: '{{ outWidth }}'}),
      { params: { outWidth: '*'}}
    ),
    transition('* <=> *',animate('{{ time }}'))
  ]
);

app.component.ts

You can now use this animation in any component, simply by importing it from the animations file:

import { Component } from '@angular/core';
import { slidingDoorAnimation } from './animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [slidingDoorAnimation]
})
export class AppComponent  {
  name = 'Angular';
  public slidingDoorValue:string = 'out';

  toggleSlideContent() {
    this.slidingDoorValue = (this.slidingDoorValue == 'in')?'out':'in'; 
  }
}

app.component.html

In the html file, bind the parameters to public component variables. The variable slidingDoorValue is set to 'in' or 'out' according to the states defined in the animation. Parameters for styles are optional, since they have default values defined in the animation.

<div [@slidingDoorAnimation]="{value:slidingDoorValue,params:{inWidth:'100px',time:'1000ms'}}">Hello world</div>

answered Nov 11, 2018 at 20:51

Jette

2,6391 gold badge31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon_Weaver Over a year ago

Interestingly 'value' seems to be required even if normally you wouldn't need one (such as [@fadeInOut]). If that's the case you can just use true. [@fadeInOut]="{ value: true, params: { fadeInDuration: 500, fadeOutDuration: 0 }}"

MishkuMoss · Accepted Answer · 2018-10-25 13:01:34Z

Animation:

trigger('openClose', [
  // ...
  state('open', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "yellow"}}),
  state('closed', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "red"}}),
  transition('open => closed', [
    animate('0.5s')
  ]),
  transition('closed => open', [
    animate('0.5s')
  ]),
]),

script:

ngOnInit() {
    setInterval(() => {
      this.toggle();
    }, 2000);
  }

  dynoColor:string="rgb(0,0,0)";
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
    let cRed = this.getRandom();
    let cGreen = this.getRandom();
    let cBlue = this.getRandom();
    this.dynoColor = "rgb("+cRed + ", " + cGreen + ", " + cBlue+")";
  }

  getRandom() {
    var x = Math.floor((Math.random() * 255) + 0);
    return x;
  }

Template:

<div [style.width.px]='100px' [style.height.px]='100px' [@openClose]="{value: (isOpen ? 'open' : 'closed'), params: {newColor: dynoColor}}" >

In my case I was changing background color randomly and it's working perfectly.

I was using angular version 5.2.10

Collectives™ on Stack Overflow

How to use input parameters in angular 6 animation?

2 Answers 2

animations.ts

app.component.ts

app.component.html

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

animations.ts

app.component.ts

app.component.html

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related