CODEWITHSUNDEEP
angularanimationionic3
Vik
Vik

Reputation: 9289

ionic 3 animate while show hide

i have an ionic card which has few elements shown or hidden based on a boolean value.

the all works fine but the change is very snappy so gives not great user experience.

the ion-card looks like:

    <ion-card>
                            <img *ngIf="item.showActions == false" class="img-card" src="{{item.imgUrl}}"/>
                            <ion-card-content>
                                <ion-card-title>{{item.msg}}</ion-card-title>
                            </ion-card-content>
                            <ion-grid *ngIf="item.showActions == true" no-padding style="border-top: 0.5px solid #E7E7E7;border-bottom: 1px solid #E7E7E7">
                                <ion-row padding><ion-col><p>For this news you can take following actions</p></ion-col></ion-row>
                                <ion-row text-center>
                                        <ion-col>
                                        <br/>
                                    <button ion-button clear small  icon-left (click)="presentPopover($event)">Show
                                    </button>
                                     <h2>Create Task</h2>
                                     <br/>
                                </ion-col>
                                </ion-row>
</ion-grid>
<ion-card>

so the item.showActions is a boolean which i flip based on some action. i want that transition to happen smoothly like either a flip or a fade.

Upvotes: 0

Views: 8866

Answers (1)

Andreas Gassmann
Andreas Gassmann

Reputation: 6544

You can do that with angular animations. An example that fades in/out an element:

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  animations: [
    trigger('visibilityChanged', [
      state('shown', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('* => *', animate('500ms'))
    ])
  ]
})

export class HomePage {
  visibility: string = 'hidden';
  ...
}

And in your HTML:

<div [@visibilityChanged]="visibility" style="opacity: 0">test</div>

More info can be found here: https://angular.io/guide/animations

Upvotes: 5

Related Questions