How to use @angular/animations - 10 common examples

opacity: 0
            })),
            state('active', style({
                opacity: 1
            })),
            transition('inactive => active', animate('750ms ease-in')),
            transition('active => inactive', animate('750ms ease-out'))
        ]),
        trigger(
            'showHideAnimation',
            [
                transition(':enter', [   // :enter is alias to 'void => *'
                    style({opacity: 0}),
                    animate(750, style({opacity: 1}))
                ]),
                transition(':leave', [   // :leave is alias to '* => void'
                    animate(750, style({opacity: 0}))
                ])
            ])
    ],
    providers: [PropertyControlService]
})
export class DynamicFormComponent implements OnInit, AfterViewInit {

    @Input() gadgetTags: any[];//todo - use to control what endpoints are displayed
    @Input() propertyPages: any[];
    @Input() instanceId: number;
    @Output() updatePropertiesEvent: EventEmitter = new EventEmitter(true);
    currentTab = 'run';
    endPoints: EndPoint[];
    state = 'inactive';
    lastActiveTab = {};

/**
 * This is the right sidebar, where attributes of nodes and relationships get displayed.
 */
@Component({
    selector: 'winery-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css'],
    animations: [
        trigger('sidebarAnimationStatus', [
            state('in', style({ transform: 'translateX(0)' })),
            transition('void => *', [
                style({ transform: 'translateX(100%)' }),
                animate('100ms cubic-bezier(0.86, 0, 0.07, 1)')
            ]),
            transition('* => void', [
                animate('200ms cubic-bezier(0.86, 0, 0.07, 1)', style({
                    opacity: 0,
                    transform: 'translateX(100%)'
                }))
            ])
        ])
    ]
})
export class SidebarComponent implements OnInit, OnDestroy {
    // ngRedux sidebarSubscription
    sidebarSubscription;
    sidebarState: any;
    sidebarAnimationStatus: string;
    maxInputEnabled = true;
    propertyDefinitionType: string;

border:10px solid black;
      width:200px;
      text-align:center;
      line-height:100px;
      font-size:50px;
      box-sizing:border-box;
      overflow:hidden;
    }
  `],
  animations: [trigger(
      'openClose',
      [
        state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
        state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
        transition(
            'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
      ])],
  template: `
    <button>Open</button>
    <button>Closed</button>
    <hr>
    <div class="toggle-container">
      Look at this box
    </div>
  `
})
export class MyExpandoCmp {
  // TODO(issue/24571): remove '!'.
  stateExpression !: string;
  constructor() { this.collapse(); }
  expand() { this.stateExpression = 'expanded'; }
  collapse() { this.stateExpression = 'collapsed'; }

@Component({
  selector: 'eftouch-form-card',
  templateUrl: './eftouch-form-card.component.html',
  animations: [
    trigger('cardStatus', [
      state('INVALID', style({
        backgroundColor: '#FFF',
        transform: 'scale(1.0)'
      })),
      state('VALID',   style({
        backgroundColor: '#afd29a',
        transform: 'scale(1.03)'
      })),
      transition('INVALID => VALID', animate('100ms ease-in')),
      transition('VALID => INVALID', animate('100ms ease-out'))
    ])
  ],
  // We use providers to link this class' superclass, TangerineBaseCardComponent, to its child EftouchFormCardComponent
  // This enables the ContentChildren query in TangerineFormComponent to find its children.
  // See https://github.com/Tangerine-Community/Tangerine/issues/369 for more information
  providers: [{provide: TangerineBaseCardComponent, useExisting: forwardRef(() => EftouchFormCardComponent)}]
})

export class EftouchFormCardComponent extends TangerineBaseCardComponent implements OnInit {

  constructor(fb: FormBuilder, el: ElementRef,service: TangerineFormDefinitionService) {
    super(fb, el, service);
  }

}

fillIn(ms: number) {
    // first define a reusable animation
    this.progress = 0;
    const myAnimation = this.builder.build([
      style({ width: `${this.progress}%` }),
      animate(ms, style({ width: '100%' }))
    ]);

    // use the returned factory object to create a player
    const player = myAnimation.create(this.linear.nativeElement);

    const t = timer(0, ms / 100).subscribe(() => {
      if (this.progress <= 0) {
        return t.unsubscribe();
      }
      this.progress++;
    });

    player.play();
    player.onDone(() => {
      if (this.animating) {

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 })),

style,
    animate,useAnimation,animation,
    transition,
} from '@angular/animations';




export const fadeIn = animation([
    style({opacity: 0}),
    animate("{{delay}}", style({opacity: 1}))
], {params: {delay: '1000ms'}});



export const fadeOut = animation([
    animate("{{delay}}", style({opacity:0}))
], {params: {delay: '1000ms'}});


export const fadeInOut = trigger('fadeInOut', [
    transition('void => *', useAnimation(fadeIn, {params: {delay:"2000ms"}})), // :enter is alias to 'void => *'
    transition('* => void', useAnimation(fadeOut,  {params: {delay:"2000ms"}} )) // :leave is alias to '* => void'
]);

import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';

export const diagramAnimations = [
  trigger('list', [
    transition(':enter', [
      query('@diagramRow', stagger(-60, animateChild()), { optional: true })
    ]),
  ]),
  trigger('diagramRow', [
    transition(':enter', [
      style({ transform: 'translate(-10px, -20px)', opacity: 0, height: 0, padding: 0 }),
      animate('0.4s cubic-bezier(.8,-0.6,0.2,1.5)',
        style({ transform: 'translate(0, 0)', opacity: 1, height: '*', padding: '*' }))
    ]),
    transition(':leave', [
      style({ transform: 'translate(0, 0) scale(1)', opacity: 1, height: '*' }),
      animate('0.3s cubic-bezier(0.4, 0.0, 1, 1)',
        // style({ transform: 'translate(-40px, -30px) scale(0.95)', opacity: 0, height: 0, padding: 0 }))
        style({ transform: 'translate(-40px, -30px) scale(0.95)', opacity: 0, height: 0 }))
    ]),
  ])
];

animations: [
    trigger('listAnimation', [
      transition(':enter, :leave, * => pending', []),
      transition('* => *', [
        // animate both the newly entered and removed items on the page
        // at the same time
        group([
          query(':enter', [
            style({ opacity: 0, height: '0px' }),
            stagger('50ms', [
              animate('500ms cubic-bezier(.35,0,.25,1)', style('*'))
            ])
          ], { optional: true }),

          query(':leave', [
            stagger('50ms', [
              animate('500ms cubic-bezier(.35,0,.25,1)', style({ opacity: 0, height: '0px', borderTop: 0, borderBottom: 0 }))
            ])
          ], { optional: true })
        ]),
      ]),
    ]),
  ]
})
export class ItemsListComponent implements OnInit {
  @Input() items: Item[];
  @Input() readonly = false;
  @Output() selected = new EventEmitter();
  @Output() deleted = new EventEmitter();

  animationsDisabled = true;