Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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 => *', [
style({
opacity: 0,
transform: 'scale3d(1.2, 1.2, 1.2)'
}),
animate('0.2s ease-out')
]),
transition('* => 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 => *', [
style({transform: 'translateY(-25%)', opacity: 0}),
animate('{{showTransitionParams}}')
]),
transition('* => void', [
animate(('{{hideTransitionParams}}'), style({
opacity: 0,
transform: 'translateY(-25%)'
}))
])
])
]
})