Multiple states for an element?

[semicoloncharmedlife]

First of all, thanks so much for creating this module! Saves a lot of time and energy on some very common animations. The issue I'm running into that I'm not finding very clear on the docs is I'm trying to have different enter/leave animations based on the direction the user is navigating on what is essentially a custom slider widget.

The following markup works great if I exclude the *ngIf, but as soon as the animation completes, all blocks are shown. If I include the *ngIf, no animation happens at all and the blocks are simply hot swapped.

Everything works as expected if I consistently have the same enter/leave animation every time regardless of direction. Thanks again and please let me know if this simply isn't possible or if I'm just missing some concept from the docs.

stepDirectionNext: boolean;
currentStep: number;

[@zoomInRight]="stepDirectionNext && currentStep===0"
[@zoomOutLeft]="stepDirectionNext && currentStep!==0"
[@zoomInLeft]="stepDirectionPrev && currentStep===0"
[@zoomOutRight]="stepDirectionPrev && currentStep!==0"

[semicoloncharmedlife]

UPDATE:

Adding something like the following enables me to accomplish the end goal but feels like a hack using both CSS animations and this library:

class="animated" [ngClass]="{'fadeOut': currentStep!==0}"
[@zoomInRight]="stepDirectionNext && currentStep===0"
[@zoomOutLeft]="stepDirectionNext && currentStep!==0"
[@zoomInLeft]="stepDirectionPrev && currentStep===0"
[@zoomOutRight]="stepDirectionPrev && currentStep!==0"

[filipows]

Hi @epiphanydigital

I'm not sure if I understand your case correctly, but you could try setting for example opacity depending on whether element is visible or not: [style.opacity]="visible ? 1 : 0"

Here's an example in Stackblitz

If you could provide a simple Stackblitz of your code, we could have a look at it together.

[dalepo]

I am kinda struggling myself on achieving something similar. For example I have some page transitions under *ngIF conditions.

<page-1 *ngIf="conditionA"> </page-1>

<page-2 *ngIf="conditionB"> </page-2>

<page-3 *ngIf="conditionC"> </page-3>

What if I wanted to slide from left when entering for the first time on page 1, and slide from right if the user is going back to page 1 from page2 ?

Any help is appreciated.

[filipows]

Hi @dalepo

I played a bit with that and maybe the following examples will help: Here's the 1st example: slide-prev-next

If this is what you were thinking about, maybe we can introduce some kind of horizontalStepTransition animation, that could look something like this: horizontalStepTransition

Here's a different example, in case we want to keep an element visible until slideOut animation finishes - we can use (@animation.done) callbacks: slide-prev-next v2

Let me know what do you think.