ionic 3 angular 4 animation not working

Question

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

Answer 1

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

  
    
     
         
    {{item.title}}
   

   
 
     
   
      {{item.data}}