Angular 4 Animations not working in Ionic 3?

Ionic Framework ionic-v3
21

@AaronSterling @nylex

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

22

Ok I found a solution… a better one: https://stackoverflow.com/questions/45657379/ionic-3-angular-4-animation-not-working/45659417#45659417

1 Like
23

i have tried that solution .it will work in browser but not in mobile device

24

you’re probably doing something wrong…it’s working for me, I have like 3 to 4 components using similar accordion lists. maybe if you share some code