代码之家 › 专栏 › 技术社区 › Jacopo Sciampi

淡入和下推动画

animation angular

Jacopo Sciampi · 技术社区 · 6 年前

每当我按下一个按钮时,我都试图给一个div设置动画。

this.list = [
"Element 1",
"Element 2",
"Element 3
];

以这种方式呈现:

 <span style="cursor: pointer;" (click)="add()">Add item</span>
    <div class="wrp"  [@fadeInOut]>
        <div class="si" *ngFor="let item of list">{{item}}</div>
    </div>

这个 add

this.list.push("Element 4");

动画:

animations: [
    trigger('fadeInOut', [
      transition(':enter', [   // :enter is alias to 'void => *'
        style({opacity:0}),
        animate(500, style({opacity:1})) 
      ]),
      transition(':leave', [   // :leave is alias to '* => void'
        animate(500, style({opacity:0})) 
      ])
    ])
  ]

当我向这个列表添加一个新项时,列表被向下推,然后新元素从左到右“淡入”。

有人能帮我吗?如果有办法用scss来做就好了。

问题也在这里: Angular2 *ngFor animation of pushed away elements

但这个例子已经行不通了。

1 回复 | 直到 6 年前

hujtomi 6 年前

只要稍加改动,对我就行了。

动画:

animations: [
    trigger('fadeInOut', [
      transition(':increment', [
        query(':enter', [
          style({ opacity: 0 }),
          animate('500ms', style({ opacity: 1 })),
        ])
      ]),
      transition(':decrement', [
        query(':leave', [
          animate('500ms', style({ opacity: 0 })),
        ])
      ]),
    ])
  ]

组成部分:

export class AppComponent {
  list = [
    "Element 1",
    "Element 2",
    "Element 3"
  ];
  itemsTotal = 3;

  add(): void {
    this.list.splice(0, 0, "Element 4")
    this.itemsTotal++;
  }
}

html:

<div class="wrp" [@fadeInOut]="itemsTotal">
  <div class="si" *ngFor="let item of list">{{item}}</div>
</div>

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前