57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import {
|
|
animate,
|
|
state,
|
|
style,
|
|
transition,
|
|
trigger,
|
|
} from '@angular/animations';
|
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-slider-item',
|
|
templateUrl: './slider-item.component.html',
|
|
styleUrls: ['./slider-item.component.css'],
|
|
animations: [
|
|
trigger('animateSliderItem', [
|
|
state(
|
|
'hide',
|
|
style({
|
|
opacity: '0',
|
|
transform: 'translateX(150px)',
|
|
}),
|
|
{
|
|
params: {
|
|
fadeInTime: 600,
|
|
fadeOutTime: 600,
|
|
},
|
|
},
|
|
),
|
|
state(
|
|
'show',
|
|
style({
|
|
opacity: '1',
|
|
transform: 'translateX(0px)',
|
|
}),
|
|
{
|
|
params: {
|
|
fadeOutTime: 600,
|
|
fadeInTime: 600,
|
|
},
|
|
},
|
|
),
|
|
transition('hide => show', animate(`{{ fadeInTime }}s ease-in`)),
|
|
transition('show => hide', animate(`{{ fadeOutTime }}s ease-out`)),
|
|
]),
|
|
],
|
|
})
|
|
export class SliderItemComponent {
|
|
@Input()
|
|
public state: boolean = false;
|
|
|
|
constructor() {}
|
|
|
|
get itemStatus(): string {
|
|
return this.state ? 'show' : 'hide';
|
|
}
|
|
}
|