Element transitions

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')
      ]),
    ])

update:

I can now open and close smoothly with the code below apart from the initial open / final close part. It is jerky at the first/last part. Still not quite there.

    trigger('visibilityChanged', [
      transition(':enter', [
        style({height:'0px', opacity: 0.5}),
        animate('3000ms ease-in-out', style( {height:'*', opacity: 1}))
      ]),
      transition(':leave', [
        style({opacity: 1}),
        animate('3000ms ease-in-out', style({height:'0px', opacity: 0}))
      ])

Not that anybody would be interested but thought for completeness if someone runs into this in future.

The problem lay with the ionic ‘padding’ in the div element

        <div [@visibilityChanged]="visibility" *ngIf="isGroupShown(1)" padding>
            Now you can read this content !!!!!!!
        </div>

if you replace ‘padding’ with the following you don’t get the issue any more and the element opens smoothly

style="padding: 10px; "