I have a simple ion card with a click event that shows the contents
<ion-card>
<ion-list>
<button (click)="toggleGroup(1)" ion-item text-wrap>
<ion-icon item-left [name]="isGroupShown(1) ? 'remove-circle' : 'add-circle'" ></ion-icon>
<ion-label><strong>Click to Open </strong></ion-label>
</button>
</ion-list>
<ion-list>
<div [@visibilityChanged]="visibility" *ngIf="isGroupShown(1)" padding>
Now you can read this content !!!!!!!
</div>
</ion-list>
</ion-card>
I have been looking to open and close the card smoothly using angular transitions
import { trigger, state, style, animate, transition } from ‘@angular/animations’;
and using the [@visibilityChanged]=“visibility” in the div element above
Does anybody know the options to have the card content open and close smoothly. I have tried various but can only get the card to open smoothly but not close, it still opens and then disappears???
trigger('visibilityChanged', [
transition('* => *', [
style({height:'0px', opacity: 0, minHeight:0}),
animate('2000ms ease-in-out')
]),
])