Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 *ngFor animation of pushed away elements

I've seen many animation tutorials for the entering or leaving elements ("New element" on the image below), but the rest of elements (Element 1 and 2), that are pushed apart usually just teleport to their new location.

enter image description here

Is there a way to animate the other elements to move away nicely, like depicted in the attached image?

like image 762
abfarid Avatar asked Feb 21 '17 19:02

abfarid


People also ask

Which animation strategy would you use to apply multiple styles for a transition?

The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.

Which animation strategy would you use if there were multiple animations that had to occur at the same time?

To create a staggered animation, use multiple Animation objects. One AnimationController controls all of the Animation s. Each Animation object specifies the animation during an Interval .

How do you use NG animation?

The ng-repeat directive also adds a ng-move class value when the HTML element changes position. In addition, during the animation, the HTML element will have a set of class values, which will be removed when the animation has finished. Example: the ng-hide directive will add these class values: ng-animate.


1 Answers

You can use angular2 animation API to achieve it.

Plunker Example

enter image description here

@Component({
  selector: 'my-app',
  template: `
     <div class="container">
      <div *ngFor="let item of items; let i = index" class="item"  (click)="remove(i)"
        [@anim]="item.state">
        {{ item.name }}
      </div>
    </div>
    <div class="aside">
      <button (click)="push()">Push</button>
    </div>
  `,
  animations: [
     trigger('anim', [
        transition('* => void', [
          style({ height: '*', opacity: '1', transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)'}),
          sequence([
            animate(".25s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none'  })),
            animate(".1s ease", style({ height: '0', opacity: 0, transform: 'translateX(20px)', 'box-shadow': 'none'  }))
          ])
        ]),
        transition('void => active', [
          style({ height: '0', opacity: '0', transform: 'translateX(20px)', 'box-shadow': 'none' }),
          sequence([
            animate(".1s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none'  })),
            animate(".35s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)'  }))
          ])
        ])
    ])
  ]
})
export class AppComponent {
  items: any[] = [
    { name: 'Element 1' },
    { name: 'Element 2' }
  ];

  push() {
    this.items.splice(1, 0, { name: 'New element', state: 'active' });
  }

  remove(index) {
     this.items.splice(index, 1);
  }
}

Don't forget to import BrowserAnimationsModule

like image 191
yurzui Avatar answered Sep 30 '22 19:09

yurzui