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

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 { Component, OnInit } from '@angular/core';
import { NotifyService } from '../../services/notify.service';
import { Notify, NotifyType, NotifyStatus } from '../../services/notify.model';
import { Observable, of, merge, Subject, concat } from 'rxjs';
import { switchMap, delay, tap } from 'rxjs/operators';
import { trigger, state, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-notify',
  templateUrl: './notify.component.html',
  styleUrls: ['./notify.component.scss'],
  animations: [
    trigger('flyInOut', [
      transition(':enter', [style({ bottom: 0 }), animate(300)]),
      transition(':leave', [animate(300, style({ bottom: 0 }))]),
    ]),
  ],
})
export class NotifyComponent implements OnInit {
  constructor(private notifyService: NotifyService) {}
  NotifyType = NotifyType;
  NotifyStatus = NotifyStatus;

  notify$: Observable;
  close$ = new Subject();
  ngOnInit() {
    this.notify$ = this.notifyService.obs().pipe(
      switchMap(n => {
        console.log(n);
        if (!n.delay) {
          return concat(of(n), this.close$);

hide() {
        this._animationFadeInPlayer = this._animationBuilder.build(animation([
            style({
                opacity: AUTO_STYLE,
                display: AUTO_STYLE,
            }),
            animate(this.duration + 'ms ease-out', style({ opacity: '0' })),
        ])).create(this._element.nativeElement);
        this._animationFadeInPlayer.onDone(() => {
            this._onFadeInDone();
        });
        this._animationFadeInPlayer.play();
    }
    /**

private buildTransitionAnimation(offset: number) {
    return this.builder.build([
      animate(
        poNavbarTiming,
        keyframes([style({ transform: `translateX(${-offset}px)` })])
      )
    ]);
  }

[ngTemplateOutlet]="template"
          [ngTemplateOutletContext]="{ context: context }">
        
        <div>
        </div>
        
      
    
  `,
  animations: [
    trigger('visibilityTransition', [
      state(
        'active',
        style({
          opacity: 1,
          transform: 'scale3d(1, 1, 1)'
        })
      ),
      transition('void =&gt; *', [
        style({
          opacity: 0,
          transform: 'scale3d(1.2, 1.2, 1.2)'
        }),
        animate('0.2s ease-out')
      ]),
      transition('* =&gt; inactive', [
        style({
          opacity: 1,
          transform: 'scale3d(1, 1, 1)'
        }),

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

export const dtDrawerAnimation: AnimationTriggerMetadata[] = [
  trigger('transform', [
    state('open, open-instant', style({ transform: 'none' })),
    transition('closed => open-instant', animate('0ms')),
    transition(
      'closed <=> open, open-instant => closed',
      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'),
    ),
  ]),
];

__metadata("design:returntype", void 0)
    ], LineChartComponent.prototype, "hideCircles", null);
    LineChartComponent = __decorate([
        Component({
            selector: 'ngx-charts-line-chart',
            template: "\n    \n      \n        \n          \n        \n      \n      \n        \n        \n        \n          \n            \n          \n\n          \n            \n\n            \n              \n            \n          \n        \n      \n      \n        \n          \n        \n      \n    \n  ",
            styleUrls: ['../common/base-chart.component.css'],
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            animations: [
                trigger('animationState', [
                    transition(':leave', [
                        style({
                            opacity: 1
                        }),
                        animate(500, style({
                            opacity: 0
                        }))
                    ])
                ])
            ]
        })
    ], LineChartComponent);
    return LineChartComponent;
}(BaseChartComponent));
export { LineChartComponent };

transition('center => void', [
        style({
          transform: 'translateX(-50%) scale(1) '
        }),
        animate(
          '250ms ease',
          style({ transform: ' translateX(-50%) scale(0)' })
        )
      ]),
      transition('void => *', [
        style({
          transform: 'scale(0)'
        }),
        animate(
          '250ms ease',
          style({
            transform: 'scale(1)'
          })
        )
      ]),
      transition('* => void', [
        style({
          transform: 'scale(1)'
        }),
        animate(
          '250ms ease',
          style({
            transform: 'scale(0)'
          })
        )
      ])
    ]),

import {ActivatedRoute, Router} from "@angular/router";
import {SnackbarService} from "../../../../services/snackbar.service";
import {UserService} from "../../../../services/user.service";
import {AppConfig} from "../../../../../config/app.config";
import {animate, style, transition, trigger} from "@angular/animations";
import {UserClaimComponent} from "./user-claim.component";
import * as _ from 'lodash';
import {ProviderService} from "../../../../services/provider.service";

@Component({
  selector: 'user-creation',
  animations: [
    trigger(
      'fadeInOut', [
        transition(':leave', [
          animate(500, style({opacity:0}))
        ])
      ]
    )
  ],
  templateUrl: './user-creation.component.html',
  styleUrls: ['./user-creation.component.scss']
})
export class UserCreationComponent implements OnInit {
  private domainId: string;
  private adminContext: boolean;
  preRegistration: boolean = false;
  hidePassword: boolean = true;
  useEmailAsUsername: boolean = false;
  user: any = {};
  userClaims: any = {};
  userProviders: any[];

<li>
                    <div>
                        <span class="ui-messages-summary"></span>
                        <span class="ui-messages-detail"></span>
                    </div>
                     
                        <span class="ui-messages-summary">{{msg.summary}}</span>
                        <span class="ui-messages-detail">{{msg.detail}}</span>
                    
                </li>
            
        
    `,
    animations: [
        trigger('messageAnimation', [
            state('visible', style({
                transform: 'translateY(0)',
                opacity: 1
            })),
            transition('void =&gt; *', [
                style({transform: 'translateY(-25%)', opacity: 0}),
                animate('{{showTransitionParams}}')
            ]),
            transition('* =&gt; void', [
                animate(('{{hideTransitionParams}}'), style({
                    opacity: 0,
                    transform: 'translateY(-25%)'
                }))
            ])
        ])
    ]
})