Angular animation not working properly

Ionic Framework ionic-v3
1

so I’m trying to do a simple invisible-to-visible animation to my ion-cards. I followed the tutorial https://devdactic.com/animations-ionic-app/

Here he did a visible-to-invisible animation on a button click event. I want mine to be initially invisible, then after the page loads, it will be visible.

animation code:

animations: [
    trigger('myvisibility', [
        state('visible', style({
            opacity: 1
        })),
        state('invisible', style({
            opacity: 0
        })),
        transition('* => *', animate('.5s'))
    ])
]

ngAfterViewInit() code:

visibleState = 'invisible';
ngAfterViewInit() {
    this.visibleState = this.visibleState == 'invisible' ? 'invisible' : 'visible';
}

My problem is that yes it works, but instead of what I want, it turns from visible-to-invisible instead. What am I doing wrong here?

2

You need to swap the invisible with visible in your ternary operator.

this.visibleState = this.visibleState == ‘invisible’ ? ‘visible’ : ‘invisible’;

3

did that and now my cards just pop out immediately, no animation is done

4

changed my animation to flipInX instead. now works perfectly

5

We need to see your markup. What trigger are you trying to animate on?

6

I was trying to animate this:

<ion-card [@flipInX]="flipInX" class="list" *ngFor="let item of information | slice:0:slice; let i=index" text-wrap>
            <ion-card-header text-wrap>
                <h2>{{item.title}}</h2>
            </ion-card-header>
            <ion-card-content style="margin-top: -20px; margin-bottom: -25px;">
                Date posted: {{item.date}}
            </ion-card-content>
            <button ion-button clear end style="float: right;" (click)="showDetails(item.title, item.date, item.content)">View</button>
        </ion-card>

Changed my @Component section to this:

@Component({
selector: 'page-home',
templateUrl: 'home.html',
animations: [
        trigger('flipInX', [transition('* => *', useAnimation(flipInX))])
    ]
})

Then now it works. The cards flip now. But now I want to animate them sequentially instead, since I’ll place them in a list. Like make them flip from top to bottom, from one card to the other.

7

Check out this article on Medium:

https://itnext.io/angular-animations-stagger-over-static-and-async-data-3907c4889479

8

thanks. I’ll check it out