I am currently developing an Angular application that will utilize a series of Modals in a wizard-style setup.
For this project, I am utilizing the Angular-cli tool.
Below is the code snippet showing how I have set up my animations:
animations:[
trigger('right-center-left',[
state('right', style({
transform: 'translateX(100%)'
})),
state('center', style({
transform: 'translateX(0)',
})),
state('left', style({
transform: 'translateX(-100%)',
})),
transition('right => center', animate('300ms ease-in')),
transition('center => left', animate('300ms ease-in')),
]),
],
The application includes five divs with the class .modal, which will be transitioning. There are buttons linked to functions nextModal() and prevModal(). The goal is for the current modal to slide out when nextModal() is called, and the next one to slide in, with the reverse action for prevModal().
To illustrate, here is an example of how these functions are implemented within the template:
<button class='right-btn' (click)='prevModal(addressModal,phonesModal)'>Previous</button>
<button class='left-btn' (click)='nextModal(phonesModal, emailModal)'>Next Part</button>
Additionally, the following functions handle the transition between modals:
nextModal = (current, next) => {
current = 'left';
next = 'center';
}
prevModal = (prev, current) => {
prev = 'center';
current = 'right';
}