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