离子 3 角度 4 动画不起作用

Question

我有一个组件，我正在尝试为手风琴列表制作动画。.我已经进行了所有更改，例如包括import { BrowserModule } from "@angular/platform-browser";和import { BrowserAnimationsModule } from "@angular/platform-browser/animations";以及imports中导入这两个模块

以下代码段用于ionic 2 angular 2但是现在，它不会抛出任何错误或其他错误，它只是不动画并且该项目根本没有隐藏(这意味着height不会变为 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>

我也包括了web-animations，因为从我读到的内容来看，动画似乎在 IOS 上不起作用，我也读到void在ionic3中不起作用，但有些人说不同

Answer 1

经过数小时的头痛和失败后还行 我做了一个更好的

.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>