@angular/animations#animate TypeScript Examples
The following examples show how to use
@angular/animations#animate.
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: cometchat-live-reactions.component.ts From cometchat-pro-angular-ui-kit with MIT License | 6 votes |
|
/**
* Animates the reactions
*/
animate(): boolean {
try {
if (!this.emojiWindow.nativeElement.parentElement) {
return false;
}
const height = this.emojiWindow.nativeElement.parentElement.offsetHeight;
const time = +new Date(); //little trick, gives unix time in ms
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
const transformString =
"translate3d(" + item.x(time) + "px, " + item.y + "px, 0px)";
item.element.style.transform = transformString;
item.element.style.visibility = "visible";
item.y += item.ySpeed;
}
this.requestAnimation();
} catch (error) {
logger(error);
}
return true;
}
Example #2
| Source File: animations.ts From StraxUI with MIT License | 6 votes |
|
public static openClose = [
trigger('openClose', [
state('closed', style({
opacity: 0,
width: '0px',
overflow: 'hidden'
})),
state('open', style({
opacity: 0.99,
width: '*',
overflow: 'hidden'
})),
transition('closed => open', animate('300ms ease-out')),
transition('open => closed', animate('150ms ease-in'))
])
];
Example #3
| 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 #4
| 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 #5
| 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 #6
| Source File: animations.ts From StraxUI with MIT License | 6 votes |
|
public static statusBar = [
trigger('highlight', [
transition(':enter', [
style({
opacity: 0
}),
animate(400)
]),
transition(':leave',
animate(400, style({opacity: 0})))
])
];
Example #7
| 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 #8
| Source File: cometchat-live-reactions.component.ts From cometchat-pro-angular-ui-kit with MIT License | 6 votes |
|
/**
* Function to call animation with Timeout
*/
requestAnimation() {
try {
this.timer = setTimeout(() => {
this.animate();
}, 1000 / 60);
} catch (error) {
logger(error);
}
}
Example #9
| 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 #10
| Source File: collapse-button.component.ts From sba-angular with MIT License | 6 votes |
|
export function collapseButtonAnimations(timings: number | string): AnimationTriggerMetadata[] {
return [
trigger('toggleCollapsed', [
state('0', style({transform: 'rotate(0deg)'})),
state('1', style({transform: 'rotate(-180deg)'})),
transition('0 <=> 1', [
animate(timings)
])
]),
];
}
Example #11
| 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 #12
| 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 #13
| 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 #14
| 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 #15
| 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 #16
| Source File: animations.ts From Angular-Cookbook with MIT License | 6 votes |
|
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,
}),
])
),
]),
])
Example #17
| Source File: animations.ts From pantry_party with Apache License 2.0 | 6 votes |
|
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")])
]
)
]
Example #18
| 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 #19
| 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 #20
| 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 #21
| Source File: matx-animations.ts From matx-angular with MIT License | 6 votes |
|
reusable = animation(
[
style({
opacity: "{{opacity}}",
transform: "scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})"
}),
animate("{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)", style("*"))
],
{
params: {
duration: "200ms",
delay: "0ms",
opacity: "0",
scale: "1",
x: "0",
y: "0",
z: "0"
}
}
)
Example #22
| Source File: side-nav.component.ts From barista with Apache License 2.0 | 5 votes |
|
@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;
}
}
}
Example #23
| 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 #24
| Source File: slide.animation.ts From ng-ant-admin with MIT License | 5 votes |
|
horizontalSlideInRouteAnimation = trigger('horizontalSlideInRouteAnimation', [
transition(':increment', [
style({position: 'relative'}),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({transform: 'translate3d(100%,0,0)'})
], options),
group([
query(':leave', [
animate('.3s ease-out', style({transform: 'translate3d(-100%,0,0)'}))
], options),
query(':enter', [
animate('.3s ease-out', style({transform: 'none'}))
], options)
]),
]),
transition(':decrement', [
style({position: 'relative'}),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({transform: 'translate3d(-100%,0,0)'})
], options),
group([
query(':leave', [
animate('.3s ease-out', style({transform: 'translate3d(100%,0,0)'}))
], options),
query(':enter', [
animate('.3s ease-out', style({transform: 'none'}))
], options)
])
])
])
Example #25
| Source File: mat-table.animations.ts From flingo with MIT License | 5 votes |
|
rotateIcon = trigger('rotatedState', [
state('false', style({ transform: 'rotate(0)' })),
state('true', style({ transform: 'rotate(-180deg)' })),
transition('true <=> false', animate('400ms ease-out'))
])
Example #26
| Source File: navigation.component.ts From angular-electron-admin with Apache License 2.0 | 5 votes |
|
@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() {
}
}
Example #27
| Source File: slide.animation.ts From onchat-web with Apache License 2.0 | 5 votes |
|
horizontalSlideInRouteAnimation = trigger('horizontalSlideInRouteAnimation', [
transition(':increment', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({ transform: 'translate3d(100%,0,0)' })
], options),
group([
query(':leave', [
animate('.3s ease-out', style({ transform: 'translate3d(-100%,0,0)' }))
], options),
query(':enter', [
animate('.3s ease-out', style({ transform: 'none' }))
], options)
]),
]),
transition(':decrement', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({ transform: 'translate3d(-100%,0,0)' })
], options),
group([
query(':leave', [
animate('.3s ease-out', style({ transform: 'translate3d(100%,0,0)' }))
], options),
query(':enter', [
animate('.3s ease-out', style({ transform: 'none' }))
], options)
])
])
])
Example #28
| Source File: subscribe-promotion.component.ts From App with MIT License | 5 votes |
|
@Component({
selector: 'app-store-subscribe-promotion',
templateUrl: 'subscribe-promotion.component.html',
styleUrls: ['subscribe-promotion.component.scss'],
animations: [
trigger('zwRotation', [
state('in', style({ transform: 'scale(1)' })),
state('out', style({ transform: 'scale(0)' })),
transition('in => out', animate(100)),
transition('out => in', animate(100)),
])
]
})
export class StoreSubscribePromotionComponent implements OnInit {
@Input() subscription: EgVault.Subscription | null = null;
zeroWidthRotation = [
{ emoteUrl: '/assets/brand/promo/zerowidth-emote1.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote1z.webp' },
{ emoteUrl: '/assets/brand/promo/zerowidth-emote2.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote2z.webp' },
{ emoteUrl: '/assets/brand/promo/zerowidth-emote3.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote3z.webp' },
{ emoteUrl: '/assets/brand/promo/zerowidth-emote4.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote4z.webp' }
] as StoreSubscribePromotionComponent.ZeroWidthCombination[];
zwTransition = new BehaviorSubject <'in' | 'out' | null>('in');
currentZeroWidth = new BehaviorSubject<StoreSubscribePromotionComponent.ZeroWidthCombination>(this.zeroWidthRotation[0]);
constructor(
public themingService: ThemingService,
public clientService: ClientService,
private dialog: MatDialog
) {}
uploadCustomAvatar(): void {
this.dialog.open(CustomAvatarDialogComponent);
}
getUserColor(): Observable<string> {
return this.clientService.getColor().pipe(
map(s => s === 'currentColor' ? '' : s)
);
}
ngOnInit(): void {
const nextRotation = (at: number) => {
const cur = this.zeroWidthRotation[at];
if (typeof cur !== 'undefined') {
setTimeout(() => this.zwTransition.next('out'), 2500);
setTimeout(() => {
this.zwTransition.next('in');
this.currentZeroWidth.next(cur);
nextRotation(at + 1);
}, 3000);
} else {
nextRotation(0);
}
};
nextRotation(0);
}
}
Example #29
| Source File: route.animations.ts From enterprise-ng-2020-workshop with MIT License | 5 votes |
|
STEPS_ALL: any[] = [
query(':enter > *', style({ opacity: 0, position: 'fixed' }), {
optional: true
}),
query(':enter .' + ROUTE_ANIMATIONS_ELEMENTS, style({ opacity: 0 }), {
optional: true
}),
sequence([
query(
':leave > *',
[
style({ transform: 'translateY(0%)', opacity: 1 }),
animate(
'0.2s ease-in-out',
style({ transform: 'translateY(-3%)', opacity: 0 })
),
style({ position: 'fixed' })
],
{ optional: true }
),
query(
':enter > *',
[
style({
transform: 'translateY(-3%)',
opacity: 0,
position: 'static'
}),
animate(
'0.5s ease-in-out',
style({ transform: 'translateY(0%)', opacity: 1 })
)
],
{ optional: true }
)
]),
query(
':enter .' + ROUTE_ANIMATIONS_ELEMENTS,
stagger(75, [
style({ transform: 'translateY(10%)', opacity: 0 }),
animate(
'0.5s ease-in-out',
style({ transform: 'translateY(0%)', opacity: 1 })
)
]),
{ optional: true }
)
]
