@angular/animations#trigger TypeScript Examples

The following examples show how to use @angular/animations#trigger. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: animations.ts From StraxUI with MIT License

6 votes

public static expand = [
    trigger('state', [
      state(
        'visible',
        style({
          opacity: '1'
        })
      ),
      state(
        'hidden',
        style({
          opacity: '0'
        })
      ),
      transition('* => visible', [animate('500ms ease-out')]),
      transition('visible => hidden', [animate('500ms ease-out')])
    ])
  ];

Example #2

Source File: app-menu.component.ts From scion-microfrontend-platform with Eclipse Public License 2.0

6 votes

@Component({
  selector: 'devtools-app-menu',
  templateUrl: './app-menu.component.html',
  styleUrls: ['./app-menu.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('openCloseMenu', [
      transition(':enter', [
        style({
          width: '0',
        }),
        animate(100, style({width: '*'})),
      ]),
    ]),
  ],
})
export class AppMenuComponent {

  @Output()
  public close = new EventEmitter<void>();  // eslint-disable-line @angular-eslint/no-output-native

  @HostListener('document:keydown.escape')
  public onBackdropClick(): void {
    this.close.emit();
  }

  public onMenuItemClick(): void {
    this.close.emit();
  }
}

Example #3

Source File: fade.animation.ts From ng-ant-admin with MIT License

6 votes

fadeRouteAnimation = trigger('fadeRouteAnimation', [
  transition('*<=>*', [

    // css styles at start of transition
    style({opacity: 0, 'will-change': 'transform'}),

    // animation and styles at end of transition
    animate('0.3s ease-in', style({opacity: 1, 'will-change': 'transform'}))
  ]),
])

Example #4

Source File: animations.ts From StraxUI with MIT License

6 votes

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'))
    ])
  ];

Example #5

Source File: expandable.component.ts From svg-path-editor with Apache License 2.0

6 votes

@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;
  }

}

Example #6

Source File: message-animations.ts From alauda-ui with MIT License

6 votes

MessageAnimations: {
  readonly inOut: AnimationTriggerMetadata;
} = {
  inOut: trigger('inOut', [
    state(
      'flyRight, flyLeft',
      style({ opacity: 1, transform: 'translateX(0)' }),
    ),
    state('slideDown', style({ opacity: 1, transform: 'translateY(0)' })),
    transition('* => slideDown', [
      style({ opacity: 0, transform: 'translateY(-50%)' }),
      animate('100ms ease-in-out'),
    ]),
    state('slideUp', style({ opacity: 0, 'margin-top': '-50%' })),
    transition('* => slideUp', [
      style({ opacity: 1, 'margin-top': '0' }),
      animate('100ms 200ms ease-in-out'),
    ]),

    state('flyLeft', style({ opacity: 1, transform: 'translateX(0)' })),
    transition('* => flyLeft', [
      style({ opacity: 0, transform: 'translateX(5%)' }),
      animate('100ms ease-in-out'),
    ]),
    state('flyUp', style({ opacity: 0, 'margin-top': '-30%' })),
    transition('* => flyUp', [
      style({ opacity: 1, 'margin-top': '0' }),
      animate('100ms 150ms ease-in-out'),
    ]),
    state('void', style({ opacity: 0 })),
    state('true', style({ opacity: 1 })),
    state('false', style({ opacity: 0 })),
    transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
    transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
  ]),
}

Example #7

Source File: success-toast.component.ts From angular-material-admin with MIT License

6 votes

@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);
  }
}

Example #8

Source File: splash.component.ts From bitcoin-s-ts with MIT License

6 votes

@Component({
  selector: 'splash',
  templateUrl: './splash.component.html',
  animations: [
  // the fade-in/fade-out animation.
  trigger('fadeOut', [
    transition(':leave', [
      query(':leave', animateChild(), {optional: true}),
      animate(300, style({opacity: 0}))
    ]),
  ]),
],
  styleUrls: ['./splash.component.scss']
})
export class SplashComponent implements OnInit {

  showSplash = false

  constructor() { }

  ngOnInit(): void {
    // Force reset splash key
    // localStorage.removeItem(SPLASH_KEY)

    const show = localStorage.getItem(SPLASH_KEY) === null
    this.showSplash = show
  }

  dontShowSplashAgainClick() {
    console.debug('dontShowSplashAgainClick()')
    localStorage.setItem(SPLASH_KEY, '1')
  }

  onClick() {
    this.showSplash = !this.showSplash
  }

}

Example #9

Source File: fade.animation.ts From ng-ant-admin with MIT License

6 votes

fadeAnimation = trigger('fadeAnimation', [
  transition(':enter', [
    style({
      transform: 'scale3d(1.075, 1.075, 1)',
      opacity: 0,
    }),
    animate('250ms ease-out', style({
      transform: 'scale3d(1, 1, 1)',
      opacity: 1
    })),
  ]),
  transition(':leave', [
    animate('250ms ease-out', style({
      transform: 'scale3d(0.95, 0.95, 1)',
      opacity: 0
    }))
  ])
])

Example #10

Source File: info-toastr.component.ts From angular-material-admin with MIT License

6 votes

@Component({
  selector: 'app-info-toastr',
  templateUrl: './info-toastr.component.html',
  styleUrls: ['./info-toastr.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 InfoToastrComponent extends Toast {
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }
}

Example #11

Source File: animations.ts From StraxUI with MIT License

6 votes

public static fadeInOut = [
    trigger('fadeIn', [
      transition(':enter', [
        style({
          opacity: 0
        }),
        animate(400)
      ]),
      transition(':leave',
                 animate(
                   400,
                   style({ opacity: 0 })
                 )
      )
    ])
  ];

Example #12

Source File: tooltip.component.ts From sba-angular with MIT License

6 votes

@Component({
  selector: 'sqx-tooltip',
  styleUrls: ['./tooltip.component.css'],
  template: `<div class="sq-tooltip" @tooltip [innerHTML]="text"></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('tooltip', [
      transition(':enter', [
        style({opacity: 0}),
        animate(300, style({opacity: 1})),
      ]),
      transition(':leave', [
        animate(300, style({opacity: 0})),
      ]),
    ]),
  ],
})
export class TooltipComponent {
  text = '';
}

Example #13

Source File: error-toastr.component.ts From angular-material-admin with MIT License

6 votes

@Component({
  selector: 'app-error-toastr',
  templateUrl: './error-toastr.component.html',
  styleUrls: ['./error-toastr.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 ErrorToastrComponent extends Toast {
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }
}

Example #14

Source File: notification.ts From sba-angular with MIT License

6 votes

export function notificationAnimations(timings: number | string): AnimationTriggerMetadata[] {
    return [
        trigger('autoClose', [
            transition('1 => void', [
                animate(timings, style({ opacity: 0 }))
            ])
        ])
    ];
}

Example #15

Source File: helpers.ts From youpez-admin with MIT License

6 votes

defaultRouterTransition = trigger('defaultRouterAnimation', [
  transition('* => *', [
    query(
      ':enter',
      [style({opacity: 0,})],
      {optional: true}
    ),
    query(
      ':leave',
      [style({opacity: 1,}), animate('0.3s cubic-bezier(.785, .135, .15, .86)', style({opacity: 0}))],
      {optional: true}
    ),
    query(
      ':enter',
      [style({opacity: 0,}), animate('0.3s cubic-bezier(.785, .135, .15, .86)', style({opacity: 1}))],
      {optional: true}
    )
  ])
])

Example #16

Source File: slide.animation.ts From ng-ant-admin with MIT License

6 votes

slideUpOnLeaveAnimation = trigger('slideUpOnLeaveAnimation', [
  transition(':leave', [
    style({overflow: 'hidden'}),
    animate('.125s ease-out', style({
      height: 0,
      opacity: 0
    }))
  ])
])

Example #17

Source File: matx-animations.ts From matx-angular with MIT License

6 votes

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"))
  ])
]

Example #18

Source File: fade.animation.ts From onchat-web with Apache License 2.0

6 votes

fadeRouteAnimation = trigger('fadeRouteAnimation', [
    transition('* <=> *', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%'
            }),
            animateChild(),
        ], options),
        query(':enter', [
            style({ opacity: 0 })
        ], options),
        group([
            query(':leave', [
                animate('5s ease-in', style({ opacity: 0 }))
            ], options),
            query(':enter', [
                animate('5s ease-in', style({ opacity: 1 }))
            ], options)
        ]),
    ])
])

Example #19

Source File: list-animation.ts From rubic-app with GNU General Public License v3.0

6 votes

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

Example #20

Source File: fade.animation.ts From onchat-web with Apache License 2.0

6 votes

fadeAnimation = trigger('fadeAnimation', [
    transition(':enter', [
        style({
            transform: 'scale3d(1.075, 1.075, 1)',
            opacity: 0,
        }),
        animate('250ms ease-out', style({
            transform: 'scale3d(1, 1, 1)',
            opacity: 1
        })),
    ]),
    transition(':leave', [
        animate('250ms ease-out', style({
            transform: 'scale3d(0.95, 0.95, 1)',
            opacity: 0
        }))
    ])
])

Example #21

Source File: animations.ts From Angular-Cookbook with MIT License

6 votes

ANIMATIONS = {
  LIST_ANIMATION: trigger('listAnimation', [
    transition('* <=> *', [
      query(
        ':enter',
        [
          style({
            opacity: 0,
          }),
          stagger(100, [
            animate(
              '0.5s ease',
              style({
                opacity: 1,
              })
            ),
          ]),
        ],
        { optional: true }
      ),
      query(
        ':leave',
        [
          stagger(100, [
            animate(
              '0.5s ease',
              style({
                opacity: 0,
              })
            ),
          ]),
        ],
        { optional: true }
      ),
    ]),
  ]),
}

Example #22

Source File: slide.animation.ts From ng-ant-admin with MIT License

6 votes

slideDownOnEnterAnimation = trigger('slideDownOnEnterAnimation', [
  transition(':enter', [
    style({
      overflow: 'hidden',
      height: 0,
      opacity: 0
    }),
    animate('.125s ease-out', style({
      height: '*',
      opacity: 1
    }))
  ])
])

Example #23

Source File: animations.ts From Angular-Cookbook with MIT License

6 votes

ANIMATIONS = {
  flyInOut: trigger('flyInOut', [
    state('in', style({
      width: 120,
      transform: 'translateX(0)', opacity: 1
    })),
    transition('void => *', [
      style({ width: 10, transform: 'translateX(50px)', opacity: 0 }),
      group([
        animate('0.3s 0.1s ease', style({
          transform: 'translateX(0)',
          // width: 120
        })),
        animate('0.3s ease', style({
          opacity: 1
        }))
      ])
    ]),
    transition('* => void', [
      group([
        animate('0.3s ease', style({
          transform: 'translateX(50px)',
          // width: 10
        })),
        animate('0.3s 0.2s ease', style({
          opacity: 0
        }))
      ])
    ])
  ])
}

Example #24

Source File: animations.ts From pantry_party with Apache License 2.0

6 votes

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%)" }))
    ])
  ]
)

Example #25

Source File: animations.ts From Angular-Cookbook with MIT License

6 votes

ROUTE_ANIMATION = trigger('routeAnimation', [
  transition('* <=> *', [
    style({
      position: 'relative',
    }),
    query(
      ':enter, :leave',
      [
        style({
          position: 'absolute',
          width: '100%',
        }),
      ],
      { optional: true }
    ),
    query(
      ':enter',
      [
        style({
          opacity: 0,
        }),
      ],
      { optional: true }
    ),
    query(':leave', [animate('300ms ease-out', style({ opacity: 0 }))], {
      optional: true,
    }),
    query(':enter', [animate('300ms ease-in', style({ opacity: 1 }))], {
      optional: true,
    }),
  ]),
])

Example #26

Source File: reminder-widget.component.ts From avid-covider with MIT License

5 votes

@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;
  }
}

Example #27

Source File: route.animations.ts From enterprise-ng-2020-workshop with MIT License

5 votes

routeAnimations = trigger('routeAnimations', [
  transition(isRouteAnimationsAll, STEPS_ALL),
  transition(isRouteAnimationsNone, STEPS_NONE),
  transition(isRouteAnimationsPage, STEPS_PAGE),
  transition(isRouteAnimationsElements, STEPS_ELEMENTS)
])

Example #28

Source File: animation.ts From mns with MIT License

5 votes

slideInAnimation =
  trigger('routeAnimations', [
    transition('HomePage <=> ProductsPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%' })
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%' }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
        ])
      ]),
      query(':enter', animateChild()),
    ]),
    transition('* <=> BlogPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%' })
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('200ms ease-out', style({ left: '100%' }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
        ])
      ]),
      query(':enter', animateChild()),
    ]),
    transition('* <=> ContactPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%' })
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('200ms ease-out', style({ left: '100%' }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
        ])
      ]),
      query(':enter', animateChild()),
    ])
  ])

Example #29

Source File: toaster.component.ts From avid-covider with MIT License

5 votes

@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);
    }
  }

}