ionic 3 angular 4 动画不起作用 [英] ionic 3 angular 4 animation not working
问题描述
我有一个组件,我正在尝试为手风琴列表制作动画.我已经进行了所有更改,例如包括从@angular/platform-browser"导入{ BrowserModule };
和 import {BrowserAnimationsModule } from "@angular/platform-browser/animations";
以及在 imports
以下代码用于ionic 2 angular 2
但是现在,它不会抛出任何错误或任何错误,它只是没有动画并且项目根本没有隐藏(意味着 height
不会变为 0`)
.ts
@Component({选择器:'page-test-comp',templateUrl: 'test-comp.html',风格:[`.项目块{最小高度:0;过渡:0.09s 全线性;}`],动画:[触发器('展开',[状态('真',风格({高度:'*'})),状态('假',风格({高度:'0'})),过渡('void => *',动画('0s')),transition('* <=> *', animate('250ms ease-in-out'))])]})导出类 TestComp {活动组=假;构造函数(公共 navCtrl:NavController){}切换组(){this.activeGroup = !this.activeGroup;}}
.html
<离子项目组><ion-item-divider color="light" (click)="toggleGroup()">工作总结<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>你好世界</p></离子项目></离子项目组></离子含量>
我还包括 web-animations
因为从我阅读的内容看来动画在 IOS 上不起作用,我还读到 void
在 中不起作用ionic3
但有些人说的不一样
经过数小时的头痛和失败后确定我做了一个更好的
.ts
@Component({选择器:页面作业详细信息",templateUrl: "job-details.html",动画:[触发器('展开',[state('ActiveGroup', style({opacity: '1', height: '*'})),state('NotActiveGroup', style({opacity: '0', height: '0', overflow: 'hidden'})),transition('ActiveGroup <=> NotActiveGroup', animate('300ms ease-in-out'))])]})ionViewDidLoad() {这个.items = [{title:'第一个按钮',数据:'First-content',activeGroup:'NotActiveGroup'},{标题:'第二个按钮',数据:'第二个内容',activeGroup:'NotActiveGroup'},{标题:'第三个按钮',数据:'第三内容',activeGroup:'NotActiveGroup'}];}展开项目(项目){this.items.map(listItem => {if (item == listItem){listItem.activeGroup = listItem.activeGroup === 'ActiveGroup' ?'NotActiveGroup' : 'ActiveGroup';}返回列表项;});}
.html
<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}}</按钮><div [@expand]="item.activeGroup">{{item.data}}</div></div></离子项目组></离子含量>I have a component where I am trying to animate an accordion list.. I have made all the changes such as including
import { BrowserModule } from "@angular/platform-browser";
and import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
as well importing both module in imports
the following piece of code used to work in ionic 2 angular 2
but now, it does not throw any error or what so ever , it just does not animate and the item is not hidden at all (meaning height
does not go to 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>
I also included web-animations
because it seems that animations does not work on IOS from what I read , I also read that void
does not work in ionic3
but some people say differently
解决方案 Ok after many hours of headache and failure
I made a better one
.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>
这篇关于ionic 3 angular 4 动画不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文