Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
opacity: 0
})),
state('active', style({
opacity: 1
})),
transition('inactive => active', animate('750ms ease-in')),
transition('active => inactive', animate('750ms ease-out'))
]),
trigger(
'showHideAnimation',
[
transition(':enter', [ // :enter is alias to 'void => *'
style({opacity: 0}),
animate(750, style({opacity: 1}))
]),
transition(':leave', [ // :leave is alias to '* => void'
animate(750, style({opacity: 0}))
])
])
],
providers: [PropertyControlService]
})
export class DynamicFormComponent implements OnInit, AfterViewInit {
@Input() gadgetTags: any[];//todo - use to control what endpoints are displayed
@Input() propertyPages: any[];
@Input() instanceId: number;
@Output() updatePropertiesEvent: EventEmitter = new EventEmitter(true);
currentTab = 'run';
endPoints: EndPoint[];
state = 'inactive';
lastActiveTab = {};
/**
* This is the right sidebar, where attributes of nodes and relationships get displayed.
*/
@Component({
selector: 'winery-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css'],
animations: [
trigger('sidebarAnimationStatus', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
style({ transform: 'translateX(100%)' }),
animate('100ms cubic-bezier(0.86, 0, 0.07, 1)')
]),
transition('* => void', [
animate('200ms cubic-bezier(0.86, 0, 0.07, 1)', style({
opacity: 0,
transform: 'translateX(100%)'
}))
])
])
]
})
export class SidebarComponent implements OnInit, OnDestroy {
// ngRedux sidebarSubscription
sidebarSubscription;
sidebarState: any;
sidebarAnimationStatus: string;
maxInputEnabled = true;
propertyDefinitionType: string;
border:10px solid black;
width:200px;
text-align:center;
line-height:100px;
font-size:50px;
box-sizing:border-box;
overflow:hidden;
}
`],
animations: [trigger(
'openClose',
[
state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
transition(
'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
])],
template: `
<button>Open</button>
<button>Closed</button>
<hr>
<div class="toggle-container">
Look at this box
</div>
`
})
export class MyExpandoCmp {
// TODO(issue/24571): remove '!'.
stateExpression !: string;
constructor() { this.collapse(); }
expand() { this.stateExpression = 'expanded'; }
collapse() { this.stateExpression = 'collapsed'; }
@Component({
selector: 'eftouch-form-card',
templateUrl: './eftouch-form-card.component.html',
animations: [
trigger('cardStatus', [
state('INVALID', style({
backgroundColor: '#FFF',
transform: 'scale(1.0)'
})),
state('VALID', style({
backgroundColor: '#afd29a',
transform: 'scale(1.03)'
})),
transition('INVALID => VALID', animate('100ms ease-in')),
transition('VALID => INVALID', animate('100ms ease-out'))
])
],
// We use providers to link this class' superclass, TangerineBaseCardComponent, to its child EftouchFormCardComponent
// This enables the ContentChildren query in TangerineFormComponent to find its children.
// See https://github.com/Tangerine-Community/Tangerine/issues/369 for more information
providers: [{provide: TangerineBaseCardComponent, useExisting: forwardRef(() => EftouchFormCardComponent)}]
})
export class EftouchFormCardComponent extends TangerineBaseCardComponent implements OnInit {
constructor(fb: FormBuilder, el: ElementRef,service: TangerineFormDefinitionService) {
super(fb, el, service);
}
}
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 { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';
/** Animations used by MatDialog. */
export const dialogAnimations: {
readonly slideDialog: AnimationTriggerMetadata;
} = {
/** Animation that slides the dialog in and out of view and fades the opacity. */
slideDialog: trigger('slideDialog', [
// Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
// scale(1)`, because for some reason specifying the transform explicitly, causes IE both
// to blur the dialog content and decimate the animation performance. Leaving it as `none`
// solves both issues.
state('enter', style({ transform: 'none', opacity: 1 })),
state('void', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
state('exit', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
]),
};
/**
* This animation controls the menu panel's entry and exit from the page.
*
* When the menu panel is added to the DOM, it scales in and fades in its border.
*
* When the menu panel is removed from the DOM, it simply fades out after a brief
* delay to display the ripple.
*/
const transformMenu = trigger('transformMenu', [
state('void', style({
opacity: 0,
// This starts off from 0.01, instead of 0, because there's an issue in the Angular animations
// as of 4.2, which causes the animation to be skipped if it starts from 0.
transform: 'scale(0.01, 0.01)'
})),
state('enter-start', style({
opacity: 1,
transform: 'scale(1, 0.5)'
})),
state('enter', style({
transform: 'scale(1, 1)'
})),
transition('void => enter-start', animate('100ms linear')),
transition('enter-start => enter', animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
transition('* => void', animate('150ms 50ms linear', style({ opacity: 0 })))
]);
/**
* This animation fades in the background color and content of the menu panel
* after its containing element is scaled in.
*/
const fadeInItems = trigger('fadeInItems', [
state('showing', style({ opacity: 1 })),
style,
animate,useAnimation,animation,
transition,
} from '@angular/animations';
export const fadeIn = animation([
style({opacity: 0}),
animate("{{delay}}", style({opacity: 1}))
], {params: {delay: '1000ms'}});
export const fadeOut = animation([
animate("{{delay}}", style({opacity:0}))
], {params: {delay: '1000ms'}});
export const fadeInOut = trigger('fadeInOut', [
transition('void => *', useAnimation(fadeIn, {params: {delay:"2000ms"}})), // :enter is alias to 'void => *'
transition('* => void', useAnimation(fadeOut, {params: {delay:"2000ms"}} )) // :leave is alias to '* => void'
]);
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
export const diagramAnimations = [
trigger('list', [
transition(':enter', [
query('@diagramRow', stagger(-60, animateChild()), { optional: true })
]),
]),
trigger('diagramRow', [
transition(':enter', [
style({ transform: 'translate(-10px, -20px)', opacity: 0, height: 0, padding: 0 }),
animate('0.4s cubic-bezier(.8,-0.6,0.2,1.5)',
style({ transform: 'translate(0, 0)', opacity: 1, height: '*', padding: '*' }))
]),
transition(':leave', [
style({ transform: 'translate(0, 0) scale(1)', opacity: 1, height: '*' }),
animate('0.3s cubic-bezier(0.4, 0.0, 1, 1)',
// style({ transform: 'translate(-40px, -30px) scale(0.95)', opacity: 0, height: 0, padding: 0 }))
style({ transform: 'translate(-40px, -30px) scale(0.95)', opacity: 0, height: 0 }))
]),
])
];
animations: [
trigger('listAnimation', [
transition(':enter, :leave, * => pending', []),
transition('* => *', [
// animate both the newly entered and removed items on the page
// at the same time
group([
query(':enter', [
style({ opacity: 0, height: '0px' }),
stagger('50ms', [
animate('500ms cubic-bezier(.35,0,.25,1)', style('*'))
])
], { optional: true }),
query(':leave', [
stagger('50ms', [
animate('500ms cubic-bezier(.35,0,.25,1)', style({ opacity: 0, height: '0px', borderTop: 0, borderBottom: 0 }))
])
], { optional: true })
]),
]),
]),
]
})
export class ItemsListComponent implements OnInit {
@Input() items: Item[];
@Input() readonly = false;
@Output() selected = new EventEmitter();
@Output() deleted = new EventEmitter();
animationsDisabled = true;