我有一个组件,我正在尝试为手风琴列表设置动画。我已经进行了所有更改,例如包括import { BrowserModule } from "@angular/platform-browser";
and 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
但有些人有不同的说法