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>