将新元素添加到列表时如何为 Angular 拖放元素设置动画

Question

为 Angular 拖放项目设置动画非常简单。然而，一个常见的用例是当用户滚动到底部时将可拖动的项目添加到下拉列表中。 “延迟加载”

这是我创建的一个 Stackblitz 来演示新的可拖动项目。

如何在新元素附加到列表时为其设置动画？

当滚动到底部时，我只需推送新元素

this.todo.push(...temp);

，但需要将它们动画化到 DOM 中。

Answer 1

如何在新元素附加到列表时为其设置动画？

您可以通过添加类来动态地对新推送的对象进行动画处理来实现此目的。

分叉的 Stackblitz 我从你的 Stackblitz 创建了

在

mockPaginate()

方法中，我向对象数组添加了一个新属性

  mockPaginate() {
    // mock data
    let temp = Array(10)
      .fill(1)
      .map((_) => {
        return faker.lorem.word();
      })
      .map((item) => ({ content: item, scssProp: 'red' }));

    this.todo.push(...temp);

    // Set a timer to remove the scssProp property after 1 second
    setTimeout(() => {
      temp.forEach((item) => {
        item.scssProp = ''; // Remove the scssProp property
      });
    }, 1000);

    console.log(this.todo);
  }

scssProp: 'red'

这个值在html中作为类传递，可以在scss中使用来添加样式和相关动画

注意：我已将输入数据修改为

{ content: string, scssProp: string }[]

类型的对象数组，而不是

string[]

，以便能够将自定义道具作为类传递以对对象进行动画处理。我在

setTimeout

1 秒后删除该类，只是为了显示动画效果。