Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save VikramVasudevan/d3fc3f7546dd8d23944177f9d7bdda93 to your computer and use it in GitHub Desktop.
Save VikramVasudevan/d3fc3f7546dd8d23944177f9d7bdda93 to your computer and use it in GitHub Desktop.
scroll-slideshow-item
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { trigger, transition, animate, style, state, animation, useAnimation } from '@angular/animations';
export const enterAnimation = animation([
style({ opacity: 0, transform: 'translateX({{ initEnterTranslate }})' }),
animate('1000ms ease-in', style({ opacity: 1, transform: 'translateX(0%)' }))
]
);
export const exitAnimation = animation([
style({ perspective: '100px', }),
animate('200ms ease-in', style({ perspective: 'none', opacity: 0, transform: 'translateX({{ exitTranslate }})' }))]);
@Component({
selector: 'scroll-slideshow-item',
templateUrl: './scroll-slideshow-item.component.html',
styleUrls: ['./scroll-slideshow-item.component.css'],
animations: [
trigger('scrollTrigger', [
transition(':enter', [useAnimation(enterAnimation, {})]),
transition(':leave', [useAnimation(enterAnimation, {})])
]
)
]
})
export class ScrollSlideshowItemComponent implements OnInit {
@ViewChild('slideshowitem') slideShowItem: ElementRef;
show: boolean = false;
direction: number;
enterInitPosition: string;
exitPosition: string;
constructor() { }
ngOnInit() {
}
toggle(prmDirection: number) {
this.show = !this.show;
this.direction = prmDirection;
this.enterInitPosition = this.direction * 100 + "%";
this.exitPosition = this.direction * 100 + "%";
console.log("Show = " + this.show);
}
reset() {
this.show = false;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment