@angular/animations#state TypeScript Examples

LIST_ANIMATION = trigger('listAnimation', [
  state('hidden', style({ opacity: '0.4' })),
  state(
    'shown',
    style({
      opacity: '1'
    })
  ),
  transition('hidden => shown', animate('0.28s ease-in-out'))
])

matxAnimations = [
  trigger("animate", [transition("void => *", [useAnimation(reusable)])]),

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

private updateCardState() {
    this.storeService.accountInfo$.pipe(first()).subscribe((accountInfo) => {
      this.ownAddress = accountInfo?.address
      if (this.color) {
        this.state = 'free'
        if (this.color.owner) {
          this.state = 'owned'
          if (this.color.auction) {
            this.state = 'unclaimed'
          }
        }
        if (isOwner(this.color, accountInfo)) {
          this.state = 'own'
        }
        if (isActiveAuction(this.color)) {
          this.state = 'auction'
        }
        if (isClaimable(this.color, accountInfo)) {
          this.state = 'claim'
        }
      }
    })
  }

public static collapseExpand = [
    trigger('collapseExpand', [
      state('collapsed', style({
        opacity: 0,
        height: 0,
        overflow: 'hidden'
      })),
      state('expanded', style({
        opacity: 1,
        height: '*',
        overflow: 'hidden'
      })),
      transition('* => expanded', animate('200ms ease-out')),
      transition('expanded => collapsed', animate('150ms ease-in'))
    ])
  ];

export function collapseAnimations(timings: number | string): AnimationTriggerMetadata[] {
    return [
        trigger('show', [
            state('void', style({height: 0})),
            transition('void <=> 1', [
                animate(timings)
            ])
        ])
    ];
}

@Component({
  selector: 'app-success-toast',
  templateUrl: './success-toast.component.html',
  styleUrls: ['./success-toast.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      state('removed', style({ opacity: 0 })),
      transition(
        'inactive => active',
        animate('{{ easeTime }}ms {{ easing }}')
      ),
      transition(
        'active => removed',
        animate('{{ easeTime }}ms {{ easing }}')
      )
    ])
  ],
  preserveWhitespaces: false
})
export class SuccessToastComponent extends Toast {
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }
}

@Component({
  selector: 'aui-table-cell[auiExpandPanel]',
  template: `
    <div
      *ngIf="expand"
      class="aui-table__cell-expand-panel"
      [@expand]="expanded"
    >
      <div
        class="aui-table__cell-expand-panel-content"
        [class.hasBackground]="background"
      >
        <ng-content></ng-content>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false,
  animations: [
    trigger('expand', [
      state('*', style({ height: 0 })),
      state('expanded', style({ height: '*', 'margin-bottom': '15px' })),
      transition('* <=> expanded', [animate('0.1s ease-in-out')]),
    ]),
  ],
})
export class TableExpandPanelCellComponent extends CdkCell {
  @Input()
  expand = false;

  @Input()
  background = true;

  get expanded() {
    return this.expand ? 'expanded' : null;
  }
}

@Component({
  selector: 'app-expandable',
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss'],
  animations: [
    trigger('openClose', [
      state('*', style({height: '*'})),
      transition(':enter', [style({height: '0'}), animate('100ms ease')]),
      transition(':leave', [animate('100ms ease', style({height: '0'}))]),
    ])
  ]
})
export class ExpandableComponent {
  @Input() opened: boolean = true;
  @Input() panelTitle: string = '';
  @Input() panelInfo: string = '';

  constructor() { }

  toggle() {
    this.opened = !this.opened;
  }

}

slideInOutDownAnimation = [
  trigger(
    "slideInOut",
    [
      state("in", style({
        opacity: 1,
        transform: "translateY(0) scaleY(1)"
      })),
      state("void", style({
        opacity: 0,
        transform: "translateY(-20%) scaleY(0)"
      })),
      transition("void => *", [animate("500ms 200ms ease-out")]),
      transition("* => void", [animate("600ms ease-in")])
    ]
  )
]

cardAnimation = trigger('cardAnimation', [
  state(
    'active',
    style({
      color: 'rgb(51, 51, 51)',
      backgroundColor: 'white',
    })
  ),
  transition('void => *', [
    animate(
      '1.5s ease',
      keyframes([
        style({
          transform: 'translateX(-200px) scale3d(0.4, 0.4, 0.4)',
          offset: 0,
        }),
        style({
          transform: 'translateX(0px) rotate(-90deg) scale3d(0.5, 0.5, 0.5)',
          offset: 0.25,
        }),
        style({
          transform:
            'translateX(-200px) rotate(90deg) translateY(0) scale3d(0.6, 0.6, 0.6)',
          offset: 0.5,
        }),
        style({
          transform:
            'translateX(-100px) rotate(135deg) translateY(0) scale3d(0.6, 0.6, 0.6)',
          offset: 0.75,
        }),
        style({
          transform: 'translateX(0) rotate(360deg)',
          offset: 1,
        }),
      ])
    ),
  ]),
])

onItemSelected(item: NavItem) {
    if (!item.children || !item.children.length) {
      this.router.navigate([item.route], {
        relativeTo: this.route,
        state: {
          item,
        },
      });
    }
    if (item.children && item.children.length) {
      this.expanded = !this.expanded;
    }
  }

cardAnimation = trigger('cardAnimation', [
  state('active', style({
    color: 'rgb(51, 51, 51)',
    backgroundColor: 'white'
  })),
  transition('void => active', [
    style({
      transform: 'translateX(-200px)',
      opacity: 0
    }),
    animate('0.2s ease', style({
      transform: 'translateX(0)',
      opacity: 1
    }))
  ]),
])

slideOutLeftAnimation = trigger(
  "slideLeftOut",
  [
    state("in", style({ opacity: 1, transform: "translateX(0)" })),
    transition("void => *", [
      style({ opacity: 0, transform: "translateX(100%)" }),
      animate(200)
    ]),
    transition("* => void", [
      animate(200, style({ opacity: 0, transform: "translateX(-100%)" }))
    ])
  ]
)

@Component({
  selector: 'app-toaster',
  templateUrl: './toaster.component.html',
  styleUrls: ['./toaster.component.less'],
  animations: [
    trigger('openClose', [
      state('closed', style({ filter: 'blur(20px)', transform: 'translateY(-35%)', opacity: 0, display: 'none'})),
      state('open', style({ filter: 'blur(0px)', transform: 'translateY(0%)', opacity: 1, })),
      transition('open => closed', [
        sequence([
          animate('0.5s', keyframes([
            style({ filter: 'blur(0px)', transform: 'translateY(0%)', opacity: 1 }),
            style({ filter: 'blur(20px)', transform: 'translateY(-35%)', opacity: 0 })
          ])),
          style({ display: 'none' })
        ])
      ]),
      transition('closed => open', [
        sequence([
          style({ display: 'flex' }),
          animate('0.5s', keyframes([
            style({ filter: 'blur(20px)', transform: 'translateY(-35%)', opacity: 0 }),
            style({ filter: 'blur(0px)', transform: 'translateY(0%)', opacity: 1 })
          ]))
        ])
      ])
    ])
  ]
})
export class ToasterComponent implements OnInit, OnChanges {

  @Input() message: string = null;

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(): void {
    if (this.message) {
      setTimeout(() => {
        this.message = null;
      }, 5000);
    }
  }

}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('socialBtnText', [
      state(
        'btn-active-text',
        style({
          width: '80px',
          visibility: 'visible',
        })
      ),
      state(
        'btn-inactive-text',
        style({
          width: '0px',
          visibility: 'hidden',
        })
      ),
      transition('btn-active-text => btn-inactive-text', [
        group([
          animate(
            '0s',
            style({
              width: '80px',
            })
          ),
          animate(
            '0s',
            style({
              visibility: 'hidden',
            })
          ),
        ]),
      ]),
      transition('btn-inactive-text => btn-active-text', [
        animate(
          '0.3s ease',
          style({
            width: '80px',
          })
        ),
        animate(
          '0.3s ease',
          style({
            visibility: 'visible',
          })
        ),
      ]),
    ]),
  ],
})
export class AppComponent {
  title = 'ng-dynamic-components';
  selectedCardType: SocialCardType;
  cardTypes = SocialCardType;

  setCardType(type: SocialCardType) {
    this.selectedCardType = type;
  }
}

@Component({
  selector: 'app-reminder-widget',
  templateUrl: './reminder-widget.component.html',
  styleUrls: ['./reminder-widget.component.less'],
  animations: [
    trigger('openClose', [
      state('open', style({transform: 'translateY(0%)'})),
      state('closed', style({transform: 'translateY(100%)', display: 'none'})),
      transition('open => closed', [
        sequence([
          animate('0.25s 0s ease-in', keyframes([
            style({transform: 'translateY(0%)'}),
            style({transform: 'translateY(100%)'})
          ])),
          style({display: 'none'})
        ])
      ]),
      transition('closed => open', [
        sequence([
          style({display: 'flex'}),
          animate('0.25s 0s ease-out', keyframes([
            style({transform: 'translateY(100%)'}),
            style({transform: 'translateY(0%)'})
          ]))
        ])
      ])
    ])
  ]
})
export class ReminderWidgetComponent implements OnInit, OnChanges {

  @Output() select = new EventEmitter<string>();
  @Input() options: any[] = null;

  isOpen = false;

  constructor() { }

  ngOnInit() {
  }

  resolve(value?) {
    this.select.emit(value);
    this.isOpen = false;
  }

  ngOnChanges() {
    this.isOpen = !!this.options && !!this.options.length;
  }
}

@Component({
	selector: 'app-toast',
	templateUrl: './toast.component.html',
	animations: [
	  trigger('flyInOut', [
		state('inactive', style({
		  opacity: 0,
		})),
		transition('inactive => active', animate('400ms ease-out', keyframes([
		  style({
			transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
			opacity: 0,
		  }),
		  style({
			transform: 'skewX(20deg)',
			opacity: 1,
		  }),
		  style({
			transform: 'skewX(-5deg)',
			opacity: 1,
		  }),
		  style({
			transform: 'none',
			opacity: 1,
		  }),
		]))),
		transition('active => removed', animate('400ms ease-out', keyframes([
		  style({
			opacity: 1,
		  }),
		  style({
			transform: 'translate3d(100%, 0, 0) skewX(30deg)',
			opacity: 0,
		  }),
		]))),
	  ]),
	],
	preserveWhitespaces: false,
  })
  export class ToastComponent extends Toast {
	constructor(
	  protected toastrService: ToastrService,
	  public toastPackage: ToastPackage,
	) {
	  super(toastrService, toastPackage);
	}

	action(event: Event) {
	  event.stopPropagation();
	  this.toastPackage.triggerAction();
	  return false;
	}
  }

toggleCollapsed() {
        this.collapsed = !this.collapsed;
        this.state.emit(this.collapsed);
    }

@Component({
  selector: 'app-menu-sheet',
  templateUrl: './menu-sheet.component.html',
  styleUrls: ['./menu-sheet.component.scss'],
  animations: [
    trigger('enterTrigger', [
      state('fadeIn', style({
        opacity: '1',
        transform: 'translateY(0%)'
      })),
      transition('void => *', [style({ opacity: '0', transform: 'translateY(50%)' }), animate('500ms')])
    ])
  ]
})
export class MenuSheetComponent implements OnInit {
  public menu: MenuSheetMenu = null;
  public selectedMenu: MenuSheetMenu = null;

  private navStack = new Stack<MenuSheetMenu>();

  constructor(
    private navParams: NavParams,
    public theme: GlobalThemeService,
    private modalCtrl: ModalController,
    private nav: GlobalNavService
  ) { }

  ngOnInit(): void {
    let options = this.navParams.data as MenuSheetComponentOptions;
    this.menu = options.menu;
    this.selectedMenu = this.menu;
  }

  ionViewWillEnter() {
  }

  public onMenuItemClicked(menuItem: MenuSheetMenu) {
    if (menuItem.items) {
      this.navStack.push(this.selectedMenu); // Saves the current menu to be able to go back
      this.selectedMenu = menuItem; // Enters the submenu
    }
    else {
      this.dismiss();

      if (typeof menuItem.routeOrAction === "string")
        void this.nav.navigateTo(null, menuItem.routeOrAction);
      else {
        void menuItem.routeOrAction();
      }
    }
  }

  public canGoBack(): boolean {
    return this.navStack.length > 0;
  }

  public goBack() {
    let previousMenu = this.navStack.pop();
    this.selectedMenu = previousMenu;
  }

  private dismiss() {
    void this.modalCtrl.dismiss();
  }
}

@Output() state: EventEmitter<boolean>;

cardAnimation = trigger('cardAnimation', [
  state(
    'active',
    style({
      color: 'rgb(51, 51, 51)',
      backgroundColor: 'white',
    })
  ),
  state(
    'hovered',
    style({
      transform: 'scale3d(1.05, 1.05, 1.05)',
      backgroundColor: '#333',
      color: 'white',
    })
  ),
  transition('void => active', [
    style({
      transform: 'translateX(-200px)',
      opacity: 0,
    }),
    animate(
      '0.2s ease',
      style({
        transform: 'translateX(0)',
        opacity: 1,
      })
    ),
  ]),
  transition('active => hovered', [
    animate(
      '0.3s 0s ease-out',
      style({
        transform: 'scale3d(1.05, 1.05, 1.05)',
        backgroundColor: '#333',
        color: 'white',
      })
    ),
  ]),
])

@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.scss'],
  animations: [
    trigger('indicatorRotate', [
      state('collapsed', style({ transform: 'rotate(0deg)' })),
      state('expanded', style({ transform: 'rotate(180deg)' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
    ]),
  ],
})
export class SideNavComponent implements OnInit {
  constructor(public navService: NavService, public router: Router, public route: ActivatedRoute) {
    if (this.depth === undefined) {
      this.depth = 0;
    }
  }

  // tslint:disable:member-ordering
  expanded: boolean = false;
  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
  @Input() depth: number;
  // tslint:enable:member-ordering
  @Input() item: NavItem;

  isActive(): boolean {
    return this.router.isActive(
      this.router.createUrlTree([this.item.route], { relativeTo: this.route }).toString(),
      true,
    );
  }

  ngOnInit() {
    // subscribing to the url, if the item has a route and url, then it doesn't have children and expanded is set to 0.
    this.navService.currentUrl.subscribe((url: string) => {
      if (this.item.route && url) {
        this.expanded = url.indexOf(`/${this.item.route}`) === 0;
        this.ariaExpanded = this.expanded;
      }
    });
  }

  onItemSelected(item: NavItem) {
    if (!item.children || !item.children.length) {
      this.router.navigate([item.route], {
        relativeTo: this.route,
        state: {
          item,
        },
      });
    }
    if (item.children && item.children.length) {
      this.expanded = !this.expanded;
    }
  }
}

slideUpDown = trigger('expandCollapse', [
    state('up', style({
        height: 0,
        color: 'transparent'
    })),
    state('down', style({ height: '*' })),
    transition('up <=> down', [ animate('200ms ease') ])
])

@Component({
  selector: 'app-deployment-frequency-report',
  templateUrl: './deployment-frequency.component.html',
  styleUrls: ['./deployment-frequency.component.scss'],
  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 DeploymentFrequencyReportComponent implements OnInit {
  @Input() deploymentFrequency: DeploymentFrequency;

  displayedColumns: string[] = ['pipeline', 'name', 'value'];
  displayedDetailedColumns: string[] = ['date', 'count'];
  dataSource: PipelineReport[] = [];
  expandedElement: PipelineReport = null;
  constructor() {}

  ngOnInit(): void {
    const deploymentFrequencyOfAvg: PipelineReport[] = deploymentFrequencyReport.map(({ id, name }) => ({
      pipeline: this.deploymentFrequency.avgDeploymentFrequency.name,
      step: new Step(this.deploymentFrequency.avgDeploymentFrequency.step),
      name,
      value: this.deploymentFrequency.avgDeploymentFrequency[id],
      items: [],
    }));

    const deploymentFrequencyOfPipelines = this.deploymentFrequency.deploymentFrequencyOfPipelines;
    deploymentFrequencyOfPipelines.forEach((deploymentFrequency) => {
      const pipelineReports: PipelineReport[] = deploymentFrequencyReport.map(({ id, name }) => ({
        pipeline: deploymentFrequency.name,
        step: new Step(deploymentFrequency.step),
        name,
        value: deploymentFrequency[id],
        items: deploymentFrequency.items,
      }));
      this.dataSource.push(...pipelineReports);
    });
    if (deploymentFrequencyOfPipelines.length > 1) this.dataSource.push(...deploymentFrequencyOfAvg);
  }
}

@Component({
    selector: 'app-menu-list-item',
    templateUrl: './menu-list-item.component.html',
    styleUrls: ['./menu-list-item.component.css'],
    animations: [
        trigger('indicatorRotate', [
            state('collapsed', style({ transform: 'rotate(0deg)' })),
            state('expanded', style({ transform: 'rotate(180deg)' })),
            transition('expanded <=> collapsed',
                animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
            ),
        ])
    ]
})
export class MenuListItemComponent implements OnInit {
    expanded: boolean = false;

    @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
    @Input() item: NavItem;
    @Input() depth: number;

  constructor(public navService: NavService, public router: Router,
    private authenticationService: AuthenticationService, private dialog: MatDialog) {

        if (this.depth === undefined) {
            this.depth = 0;
        }
    }

    ngOnInit() {
        this.navService.getCurrentUrl().subscribe((url: string) => {
            if (this.item.route) {
                this.expanded = url.indexOf(`/${this.item.route}`) === 0;
                this.ariaExpanded = this.expanded;
            }
        });
    }

    onItemSelected(item: NavItem) {
        this.dialog.closeAll();

        if (!item.children || !item.children.length) {
            if (item.route) {
                this.router.navigate([item.route]);
            } else {
                this.handleSpecial(item);
            }
        } 

        if (item.children && item.children.length) {
            this.expanded = !this.expanded;
        }
    }

    handleSpecial(item: NavItem) {
        if (item.displayName == 'Sign Out') {
            this.handleSignOut();
        }
    }

    handleSignOut() {
        const dialogData = new ConfirmationDialogModel('Confirm', 'Are you sure you want to logout?');
        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
            maxWidth: '400px',
            closeOnNavigation: true,
            data: dialogData
        })

        dialogRef.afterClosed().subscribe(dialogResult => {
          if (dialogResult) {
              this.authenticationService.logout();
            }
        });
  }
}

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
  animations: [
    trigger('toggleHeight', [
      state('inactive', style({
        height: '0',
        opacity: '0'
      })),
      state('active', style({
        height: '*',
        opacity: '1'
      })),
      transition('inactive => active', animate('200ms ease-in')),
      transition('active => inactive', animate('200ms ease-out'))
    ])
  ]
})
export class NavigationComponent implements OnInit {
  sidebarVisible: boolean;
  navigationSubState: any = {
    Icon: 'inactive',
    Component: 'inactive',
    Directive: 'inactive',
    Error: 'inactive',
    Form: 'inactive'
  };

  constructor(private navigationService: NavigationService) {
    navigationService.sidebarVisibilitySubject.subscribe((value) => {
      this.sidebarVisible = value;
    });
  }

  toggleNavigationSub(menu, event) {
    event.preventDefault();
    this.navigationSubState[menu] = (this.navigationSubState[menu] === 'inactive' ? 'active' : 'inactive');
  }

  ngOnInit() {
  }
}

speedDialFabAnimations = [
  trigger('fabToggler', [
    state('false', style({
      transform: 'rotate(0deg)'
    })),
    state('true', style({
      transform: 'rotate(225deg)'
    })),
    transition('* <=> *', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
  ]),
  trigger('fabsStagger', [
    transition('* => *', [

      query(':enter', style({opacity: 0}), {optional: true}),

      query(':enter', stagger('40ms',
        [
          animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
            keyframes(
              [
                style({opacity: 0, transform: 'translateY(10px)'}),
                style({opacity: 1, transform: 'translateY(0)'}),
              ]
            )
          )
        ]
      ), {optional: true}),

      query(':leave',
        animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
          keyframes([
            style({opacity: 1}),
            style({opacity: 0}),
          ])
        ), {optional: true}
      )

    ])
  ])
]

@Component({
  selector: 'aui-accordion-item',
  templateUrl: 'accordion-item.component.html',
  styleUrls: ['accordion-item.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false,
  animations: [
    trigger('expand', [
      state('*', style({ height: 0 })),
      state('expanded', style({ height: '*' })),
      transition('* <=> expanded', [animate('0.1s ease-in-out')]),
    ]),
  ],
  viewProviders: [AccordionItemComponent],
})
export class AccordionItemComponent
  extends CdkAccordionItem
  implements AfterContentInit
{
  @Input()
  background = true;

  @ContentChild(AccordionItemContentDirective, {
    read: TemplateRef,
    static: true,
  })
  _lazyContentTpl: TemplateRef<unknown>;

  lazyContentTpl: TemplateRef<unknown>;

  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
  constructor(
    accordion: AccordionComponent,
    cdr: ChangeDetectorRef,
    uniqueSelectionDispatcher: UniqueSelectionDispatcher,
  ) {
    super(accordion, cdr, uniqueSelectionDispatcher);
  }

  ngAfterContentInit() {
    if (this._lazyContentTpl) {
      // Render the content as soon as the accordion becomes open.
      this.opened
        .pipe(
          startWith(null as void),
          filter(() => !!this.expanded),
          take(1),
        )
        .subscribe(() => {
          this.lazyContentTpl = this._lazyContentTpl;
        });
    }
  }
}

state: ColorState = 'loading'