41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { Component, AfterContentInit, Input } from '@angular/core';
|
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
|
|
@Component({
|
|
selector: 'event-component',
|
|
templateUrl: './event.component.html',
|
|
styleUrls: ['./event.component.css'],
|
|
animations:[
|
|
trigger("inout",[
|
|
state("1", style({ opacity: '1', transform:'translateX(0)' })),
|
|
state("0",style({ opacity: '0', transform:'translateX(5%)' })),
|
|
transition('* => 1',[
|
|
animate('500ms ease-in-out')
|
|
]),
|
|
transition(':enter',[
|
|
animate('0ms')
|
|
])
|
|
])
|
|
]
|
|
})
|
|
export class EventComponent implements AfterContentInit {
|
|
@Input()
|
|
title: string;
|
|
@Input()
|
|
description: string;
|
|
@Input()
|
|
startDate: Date;
|
|
@Input()
|
|
endDate: Date;
|
|
public startFadeIn: boolean = false;
|
|
@Input()
|
|
public delayFadeIn: number = 100;
|
|
|
|
constructor(){
|
|
}
|
|
|
|
ngAfterContentInit(): void{
|
|
setTimeout(() => this.startFadeIn = true, this.delayFadeIn);
|
|
}
|
|
}
|