documento - animación iónica 3 angular 4 no funciona

ionic tutorial

Question

Tengo un componente en el que intento animar una lista de acordeones. He realizado todos los cambios, como la import { BrowserModule } from "@angular/platform-browser"; e import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; así como la importación de ambos módulos en las imports

la siguiente pieza de código solía funcionar en ionic 2 angular 2 pero ahora, no arroja ningún error o lo que sea, simplemente no anima y el elemento no está oculto en absoluto (lo que significa que la height no va a 0`)

.ts

@Component({
  selector: ''page-test-comp'',
  templateUrl: ''test-comp.html'',
  styles:[
       `
       .item-block{
       min-height: 0;
       transition: 0.09s all linear;
      }
      `
  ],
  animations: [
    trigger(''expand'', [
      state(''true'', style({ height: ''*''})),
      state(''false'', style({ height: ''0''})),
      transition(''void => *'', animate(''0s'')),
      transition(''* <=> *'', animate(''250ms ease-in-out''))
    ])
  ]
})

export class TestComp {
 activeGroup= false;

 constructor(public navCtrl: NavController) {}

 toggleGroup(){
   this.activeGroup = !this.activeGroup;
 }
}

.html

<ion-content>
 <ion-item-group>
  <ion-item-divider color="light" (click)="toggleGroup()">
    Job Summary
   <ion-icon style="padding-right: 10px;"  item-right name="ios-arrow-up" *ngIf="!activeGroup"></ion-icon>
   <ion-icon style="padding-right: 10px;"  item-right name="ios-arrow-down" *ngIf="activeGroup"></ion-icon>
  </ion-item-divider>

  <ion-item no-lines [@expand]="activeGroup">
    <p>
      hello world
    </p>
  </ion-item>

 </ion-item-group>
</ion-content>

También web-animations porque parece que las animaciones no funcionan en IOS a partir de lo que leo, también leo que el void no funciona en ionic3 pero algunas personas dicen de manera diferente

Answer 1

Ok después de muchas horas de dolor de cabeza y fracaso, hice una mejor

.ts

@Component({
  selector: "page-job-details",
  templateUrl: "job-details.html",
  animations: [
    trigger(''expand'', [
      state(''ActiveGroup'', style({opacity: ''1'', height: ''*''})),
      state(''NotActiveGroup'', style({opacity: ''0'', height: ''0'', overflow: ''hidden''})),
      transition(''ActiveGroup <=> NotActiveGroup'', animate(''300ms ease-in-out''))
    ])
  ]
})

ionViewDidLoad() {
  this.items = [
    {title: ''First Button'', data: ''First-content'', activeGroup: ''NotActiveGroup''},
    {title: ''Second Button'', data: ''Second-content'', activeGroup: ''NotActiveGroup''},
    {title: ''Third Button'', data: ''Third-content'', activeGroup: ''NotActiveGroup''}
  ];
}

expandItem(item){

  this.items.map(listItem => {
    if (item == listItem){
      listItem.activeGroup = listItem.activeGroup === ''ActiveGroup'' ? ''NotActiveGroup'' : ''ActiveGroup'';
    }
    return listItem;
  });
}

.html

<ion-content>
  <ion-item-group *ngFor="let item of items">
    <button ion-item no-lines (tap)="expandItem(item)">
     <ion-icon item-right name="ios-arrow-down" *ngIf="item.activeGroup === ''NotActiveGroup''"></ion-icon>
     <ion-icon item-right name="ios-arrow-up" *ngIf="item.activeGroup === ''ActiveGroup''"></ion-icon>    
    {{item.title}}
   </button>

   <div [@expand]="item.activeGroup"> 
     <div>   
      {{item.data}}
     </div>   
   </div> 
 </ion-item-group>
</ion-content>