离子3角4动画不工作 [英] ionic 3 angular 4 animation not working

问题描述

我有一个组件，我正在尝试为手风琴列表设置动画。我已经进行了所有更改，例如包括来自@ angular / platform-b​​rowser的
import {BrowserModule} ;
和从@ angular / platform-b​​rowser / animations导入{BrowserAnimationsModule};
以及导入两者中的模块导入

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

以下用于离子2角度2的代码
但是现在，它不会抛出任何错误或者什么，它只是没有动画而且项目根本没有隐藏（意味着 height 不会转到0`）

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>

我还包括 web-animations 因为它似乎动画不适用于我阅读的IOS，我还读到 void 在 ionic3 中不起作用但是有些人说的不同

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>

这篇关于离子3角4动画不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！