Animating with Variables Angular 4

Animating with variables Angular 4

You need to wrap the param values in the template in an object
"params"

   @Component({
  selector: 'hello',
  template:  `<div (click)="expandText()" style="cursor: pointer">
                <div [@expandCollapse]="{value: longTextState, params:{min_height: minHeight}}" [innerHtml]="textBody" style="overflow: hidden;">
                </div> // you need to wrap it in params the input values
                <h1>{{longTextState}}</h1>
                <h1>this.minHeight: {{minHeight}}</h1>
              </div>`,
  styles: [`h1 { font-family: Lato; }`],
  animations: [
    trigger('expandCollapse',[
      state('collapsed', style({
        height: '{{min_height}}',
      }), {params: {min_height: '3em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})

Working LINK

Angular 4 Animation variable style support

@Component({
  selector: 'your-selector',
  ...  
  animations: [
    trigger('slideDown', [
        state('0', style({ height: '0px', overflow: 'hidden' })),

        // '*' lets you animate to any height or other numeric property
        state('1', style({ height: '*', overflow: 'hidden'  })), 

        // this gets you to the default "hidden" state
        transition('void => *', [    
            animate(0)
        ]),

        transition('* => *', [
            animate('300ms ease-in-out')
        ])
    ])
  ]

on your html template:

<div [@slideDown]="slideDown"> where slideDown is a boolean </div>

You'll need to import the animation module in your app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports: [
    BrowserModule,
    ...
    BrowserAnimationsModule,

for more info: https://angular.io/docs/ts/latest/guide/animations.html

plunker: https://plnkr.co/edit/kP14stY51DBUQhMezFmC?p=preview

Angular 4 Animations add parameters

Here is the solution I needed

[@leavingTowardsTop]="{value: ':leave', params : {topPixels: '-300px'}}"

How to conditionally animate a transition based on variables? (Angular Animations)

Actually, I only had to define the fallback when initializing the variables, not inside the animation.

So like this:

  @HostBinding('@someAnimation')
  state = {
    value: 'inactive',
    params: {
      variable: this.getVariable(),
      secondVariable: this.getSecondVariable() ? this.getSecondVariable() : this.getVariable()
    }
  };

How to use input parameters in angular 6 animation?

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>

Angular (4, 5, 6, 7) - Simple example of slide in out animation on ngIf

First some code, then the explanation. The official docs describing this are here.

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

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

In your template:

<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>

I found the angular way a bit tricky to grasp, but once you understand it, it quite easy and powerful.

The animations part in human language:

• We're naming this animation 'slideInOut'.

• When the element is added (:enter), we do the following:

• ->Immediately move the element 100% up (from itself), to appear off screen.

• ->then animate the translateY value until we are at 0%, where the element would naturally be.

• When the element is removed, animate the translateY value (currently 0), to -100% (off screen).

The easing function we're using is ease-in, in 200 milliseconds, you can change that to your liking.

Hope this helps!

---

Related Topics