Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use input parameters in angular 6 animation?

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?

like image 587
julianpoemp Avatar asked Jun 11 '18 21:06

julianpoemp


People also ask

How do I use BrowserAnimationsModule?

The BrowserAnimationsModule must be imported in the main module of the application app. module. ts and after importing, it is necessary to restart the application so that the imported module is recognized.

What is @keyframes in Angular?

The keyframes() function in Angular allows you to specify multiple interim styles within a single transition. An optional offset can be used to define the point in the animation where each style change should occur.

Which statements are applicable for animation in Angular?

Animation state and styleslinkUse Angular's state() function to define different states to call at the end of each transition. This function takes two arguments: A unique name like open or closed and a style() function. Use the style() function to define a set of styles to associate with a given state name.


1 Answers

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>
like image 52
Jette Avatar answered Sep 30 '22 17:09

Jette