Angular2 * ng用于推开元素的动画 [英] Angular2 *ngFor animation of pushed away elements

问题描述

我已经看过很多关于进入或离开元素的动画教程（下面图片中的新元素），但被推开的其他元素（元素1和2）通常只是传送到他们的新位置。

有没有办法让对方动画很好地移动的元素，如附图中所示？

解决方案

你可以使用angular2

  @Component（{
选择器：'my-app'，
模板：`
< div class =container> 
< div * ngFor =let item of items; let i = indexclass =item（click）=remove（i）
 [@anim] =item.state> 
 {{ item.name}} 
< / div> 
< / div> 
< div class =aside> 
< button（click）=push （）>推送< /按钮> 
< / div> 
`，
动画：[
触发器（'anim'，[
 transition（' * => void'，[
 style（{height：'*'，opacity：'1'，transform：'translateX（0）'，'box-shadow'：'0 1px 4px 0 rgba（0 ， 0,0,0.3）'}），
序列（[
 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：'。''，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）'}））
]）
]）
]）
] 
}）
导出类AppComponent {
项：任意[] = [
 {名称：'元素1'}，
 {名称：'元素2'} 
]; 
 
 push（）{
 this.items.splice（1,0，{name：'New element'，state：'active'}）; 
} 
 
 remove（index）{
 this.items.splice（index，1）; 
} 
} 
  

不要忘记导入 BrowserAnimationsModule

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.

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

解决方案

You can use angular2 animation API to achieve it.

Plunker Example

@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

这篇关于Angular2 * ng用于推开元素的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！