How to use the @angular/animations.state function in @angular/animations

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


/** Animations used by MatDialog. */
export const dialogAnimations: {
    readonly slideDialog: AnimationTriggerMetadata;
} = {
    /** Animation that slides the dialog in and out of view and fades the opacity. */
    slideDialog: trigger('slideDialog', [
        // Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
        // scale(1)`, because for some reason specifying the transform explicitly, causes IE both
        // to blur the dialog content and decimate the animation performance. Leaving it as `none`
        // solves both issues.
        state('enter', style({ transform: 'none', opacity: 1 })),
        state('void', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
        state('exit', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
        transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
    ]),
};

/**
 * This animation controls the menu panel's entry and exit from the page.
 *
 * When the menu panel is added to the DOM, it scales in and fades in its border.
 *
 * When the menu panel is removed from the DOM, it simply fades out after a brief
 * delay to display the ripple.
 */
const transformMenu = trigger('transformMenu', [
    state('void', style({
        opacity: 0,
        // This starts off from 0.01, instead of 0, because there's an issue in the Angular animations
        // as of 4.2, which causes the animation to be skipped if it starts from 0.
        transform: 'scale(0.01, 0.01)'
    })),
    state('enter-start', style({
        opacity: 1,
        transform: 'scale(1, 0.5)'
    })),
    state('enter', style({
        transform: 'scale(1, 1)'
    })),
    transition('void => enter-start', animate('100ms linear')),
    transition('enter-start => enter', animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
    transition('* => void', animate('150ms 50ms linear', style({ opacity: 0 })))
]);
/**
 * This animation fades in the background color and content of the menu panel
 * after its containing element is scaled in.
 */
const fadeInItems = trigger('fadeInItems', [
    state('showing', style({ opacity: 1 })),

import { IncentivePolicy } from '~/entities/database/Incentive/incentivePolicy';
import { ApiResponse } from '~/entities/responses/apiResponse';
import { Meta } from '~/entities/responses/meta';
import { TableService } from '~/shared/services/tableService';
import { TranslationService } from '~/shared/services/translationService';

import { INCENTIVE_HEADERS } from '../../../config/header';
import { IncentivePolicyService } from '../../../services/incentivePolicyService';

@Component({
  templateUrl: 'template.html',
  styleUrls: ['style.scss'],
  animations: [
    trigger('rowExpansionTrigger', [
      state(
        'void',
        style({
          transform: 'translateX(-10%)',
          opacity: 0,
        }),
      ),
      state(
        'active',
        style({
          transform: 'translateX(0)',
          opacity: 1,
        }),
      ),
      transition('* <=> *', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
    ]),
  ],

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

/**
 * @title Table with expandable rows
 */
@Component({
  selector: 'table-expandable-rows-example',
  styleUrls: ['table-expandable-rows-example.css'],
  templateUrl: 'table-expandable-rows-example.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class TableExpandableRowsExample {
  dataSource = ELEMENT_DATA;
  columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
  expandedElement: PeriodicElement | null;
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;

display: 'flex'
      })
    ),
    transition('void => *', animate('300ms')),
    transition('* => void', animate('300ms'))
  ]),

  trigger('slideInRight', [
    state(
      'void',
      style({
        transform: 'translateX(100%)',
        display: 'none'
      })
    ),
    state(
      '*',
      style({
        transform: 'translateX(0)',
        display: 'flex'
      })
    ),
    transition('void => *', animate('300ms')),
    transition('* => void', animate('300ms'))
  ]),

  trigger('slideInTop', [
    state(
      'void',
      style({
        transform: 'translateY(-100%)',
        display: 'none'

),
    transition(
      'void => 200',
      query('@*', [stagger('200ms', [animateChild()])], { optional: true })
    )
  ]),

  trigger('fadeInOut', [
    state(
      '0',
      style({
        display: 'none',
        opacity: 0
      })
    ),
    state(
      '1',
      style({
        display: 'block',
        opacity: 1
      })
    ),
    transition('1 => 0', animate('300ms ease-out')),
    transition('0 => 1', animate('300ms ease-in'))
  ]),

  trigger('slideInOut', [
    state(
      '0',
      style({
        height: '0px',
        display: 'none'

`,
    styleUrls: ["./hero-list.component.css"],
    /**
        * Define two states, "inactive" and "active", and the end
    * styles that apply whenever the element is in those states.
        * Then define animations for transitioning between the states,
    * one in each direction
    */
    animations: [
        trigger("heroState", [
            state("inactive", style({
                backgroundColor: "#eee",
                transform: "scale(1)"
            })),
            state("active",   style({
                backgroundColor: "#cfd8dc",
                transform: "scale(1.1)"
            })),

            transition("inactive => active", animate("100ms ease-in")),
            transition("active => inactive", animate("100ms ease-out")),
        ])
    ]
})
export class HeroListBasicComponent {
    @Input() heroes: Heroes;
}

*/

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

import { ConfigurationService } from './shared/configuration.service';
import { StreampipesPeContainer } from "./shared/streampipes-pe-container.model";
import { StreampipesPeContainerConifgs } from "./shared/streampipes-pe-container-configs";
import {MatPaginator, MatTableDataSource} from "@angular/material";
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
    templateUrl: './configuration.component.html',
    styleUrls: ['./configuration.component.css'],
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
            state('expanded', style({height: '*'})),
            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ]
})
export class ConfigurationComponent {

    selectedIndex: number = 0;

    constructor() {
    }

    selectedIndexChange(index: number) {
        this.selectedIndex = index;
    }

}
        });
    }

    removeGroup(group: AccordionGroupComponent): void {
        const index = this.groups.indexOf(group);
        if (index !== -1) {
            this.groups.splice(index, 1);
        }
    }
}

@Component({
    animations: [
        trigger('expandAnimation', [
            state(
                'expanded',
                style({
                    height: '*',
                    overflow: 'visible'
                })
            ),
            state(
                'collapsed',
                style({
                    height: '0px',
                    overflow: 'hidden'
                })
            ),
            transition('expanded <=> collapsed', animate('250ms ease-in-out'))
        ])
    ],

<button>x</button>
    
  `,
  animations: [
    trigger('backgroundAnimation', [
      state('focus', style({ 'background-color':'white' })),
      state('blur', style({ 'background-color':'grey' })),
      transition('* =&gt; *', [
        animate(500)
      ])
    ]),
    trigger('boxAnimation', [
      state('*', style({ 'height': '*', 'background-color': '#dddddd', 'color':'black' })),
      state('void, hidden', style({ 'height': 0, 'opacity': 0 })),
      state('start', style({ 'background-color': 'red', 'height': '*' })),
      state('active', style({ 'background-color': 'orange', 'color': 'white', 'font-size':'100px' })),

      transition('active &lt;=&gt; start', [
        animate(500, style({ 'transform': 'scale(2)' })),
        animate(500)
      ]),

      transition('* =&gt; *', [
        animate(1000, style({ 'opacity': 1, 'height': 300 })),
        animate(1000, style({ 'background-color': 'blue' })),
        animate(1000, keyframes([
          style({ 'background-color': 'blue', 'color': 'black', 'offset': 0.2 }),
          style({ 'background-color': 'brown', 'color': 'black', 'offset': 0.5 }),
          style({ 'background-color': 'black', 'color': 'white', 'offset': 1 })
        ])),
        animate(2000)
      ])