Angular, How to trigger one of multiple animations

Question

I have two list of items, and I want to animate each of them when the fa caret which belongs to it parent is clicked.

here is html:

<li>
  <div>
    <span> something1</span>
    <i class="fa fa-angle-right" (click)="toggleList()"></i>
  </div>
 <ul [@elementState]="showlist">
   <li>something2</li>
   <li>something3</li>
 </ul>
</li>
<li>
  <div>
    <span>something4</span>
    <i class="fa fa-angle-right" (click)="toggleList()"></i>
  </div>
  <ul  [@elementState]="showlist">
      <li >something5</li>
      <li >something6</li>
    </ul>
</li>

here is ts from @component:

   animations: [
    trigger('elementState', [
      state('show', style({
        'height':'88px'
      })),
      state('hide',   style({
        'hide':'0px'
      })),
      transition('show <=> hide', animate('300ms'))
    ])
  ]

and here is some ts from class:

showlist = 'hide';


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

And I am aiming to make those two list open separetly, because for the moment each icon click triggers animation for both list and that is not what I would like to happen.

I thought of making individual animation for each but there would be a lot code repetition so if thats possible I want to avoid that.

Does anyone know the trick to make it work ?

Problem is that both are bound to the same property of the containing component: showlist. The behavior you are seeing is to be expected. — Aluan Haddad
– Aluan Haddad, Commented Apr 24, 2018 at 6:04
I am aware of that, just need a simple way to get around and make animation works each of them separetly . — Jake11
– Jake11, Commented Apr 24, 2018 at 6:08

Carsten · Accepted Answer · 2018-04-24 06:29:06Z

1

You are using the same variable for both of the unordered lists, obviously they will trigger at the same time.

Instead of using a string variable 'show' and 'hide' to trigger your animations, you can use a boolean and check if the unordered list is the one you want to animate. You can use your imagination to think of whatever you want to use but i'll give you a simple example:

animations: [
    trigger('elementState', [
      state('1', style({
        'height':'88px'
      })),
      state('0',   style({
        'hide':'0px'
      })),
      transition('0 <=> 1', animate('300ms'))
    ])
  ]

<ul [@elementState]="showlist == 'list1'"> // or 'list2'

(click)="showlist = 'list1'" // or 'list2'

answered Apr 24, 2018 at 6:29

Carsten

4,22826 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chandrakant · Accepted Answer · 2019-07-01 08:17:25Z

I'm assuming that you will use *ngFor here, accordingly writing answer

<li *ngFor = "let something of something_list; let showlist = false">
  <div>
    <span> something1</span>
    <i class="fa fa-angle-right" (click)="showlist = !showlist"></i>
  </div>
  <ul [@elementState]="showlist ? 'show' : 'hide'>
    <li>something2</li>
    <li>something3</li>
  </ul>
</li>

Here I have declared local variable for each list item using let (see let showlist = false) by default its false

on click toggling that to true/false (see (click)="showlist = !showlist")

and finally if showlist is true will trigger state "show" else "hide" these are states which you have defined within your animation (see [@elementState]="showlist ? 'show' : 'hide')

Collectives™ on Stack Overflow

Angular, How to trigger one of multiple animations

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related