CODEWITHSUNDEEP
angular
Dean Johns
Dean Johns

Reputation: 498

Transition in Animations not working in Angular

I have a main list and sub list panel in my Angular project. I need to animate the sub list to fold down / fold up when clicking on a main list item. I have created this:

component.ts:

import { Component, OnInit} from '@angular/core';
import { trigger,state,style,transition,animate,group } from '@angular/animations';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./../../resources/css/style.css'],
  animations: [
        trigger('subcat', [
        state('show', style({
            display: 'block',
        })),
        state('hide', style({
            display: 'none',
        })),
        transition('show <=> hide', animate('100ms ease-out'))
    ])
  ]
})

export class CategoryComponent implements OnInit {

  show: boolean = false;

  state: string = 'hide';

  constructor(){}

  showlist() {
        this.state = (this.state === 'hide' ? 'show' : 'hide');
  }

  ngOnInit(){

  }

}

component.html:

<div class="category">
   <div class="row">
          <dl *ngFor="let item of array">
            <dt *ngIf="post.parent_id=='0';then m" id="itemcat" style="width: 15px"></dt>
            <ng-template #m><dt (click)="showlist()" ><a [routerLink]="[/list]" routerLinkActive="active">{{post.name}}</a></dt>
                <dl *ngFor="let subitem of array">
                <dt *ngIf="sub.parent_id==post.id;then s"></dt>
                <ng-template #s><dd  [@subcat]='state' ><a routerLink="/sublist" routerLinkActive="active">{{sub.name}}</a></dd></ng-template>
                </dl>
            </ng-template>
          </dl>
   </div>
</div>

when I click on a main item, it will show sub items list but not animated. Just show and hide the sub list. And also Show all the sub lists when clicking on any of main list item instead showing the particular sub list only. How can solve this?

Upvotes: 0

Views: 324

Answers (1)

Jscti
Jscti

Reputation: 14440

You're actually not animating anything and the only css property you used (display cannot be animated. You need somethingg like :

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./../../resources/css/style.css'],
  animations: [
        trigger('subcat', [
        state('show', style({
            translate: translateY(0); // or height: '*' or ...
            opacity: 1;
        })),
        state('hide', style({
            translate: translateY(-100%); // or height: '0' or ...
            opacity: 0
        })),
        transition('show <=> hide', animate('100ms ease-out'))
    ])
  ]
})

Upvotes: 1

Related Questions