Question

我正在尝试通过从我的API获取用户数组，然后将该数组分配给本地变量来实现交错页面动画，该数组由ngFor绑定到表，然后循环并显示值。

我目前正在使用scss创建一个动画延迟变量，该变量循环有限次。初始元素的加载和交错效果很好，但是当将一个新元素添加到数组变量时，它会保留最后使用的交错延迟值，从而使它在视图中更晚出现。

我尝试将内置于交错函数中的Angulars与动画一起使用，但它似乎不起作用。我已经看到一些github报告，说这是查询问题。我可以创建一个效果很好的基本动画，但是当在查询中使用交错时，这些动画就不会触发。这是上述github报告的链接： https://github.com/angular/angular/issues/19786

这是我的scss文件

.userrow{
  animation: .3s ease-in-out both fade-in-entry;
  //animation-delay: .5s;
}



@keyframes fade-in-entry{
  0%{
    opacity: 0;
    transform: translateX(+100%);
  }

  100%{
    opacity:1;
    transform: translateX(0);
  }

}

@for $i from 1 through 21 {
  .userrow:nth-child(#{$i}) {
    animation-delay: #{$i * 0.2}s;
  }
}

和HTML

<tr style = "background: lightblue;" >
  <th>UserID</th>
  <th>UserName</th>
  <th>FirstName</th>
  <th>Delete</th>
</tr>

<tr *ngFor='let user of _userService.users' class="userrow">

  <td>{{user.userID}}</td>
  <td>{{user.userName}}</td>
  <td>{{user.firstName}}</td>
  <td><button (click)="deleteUser(user.userID)">Delete</button></td>


</tr>

我有一个单独的表单组件，该组件接受用户名和名字并将新的用户对象发布到数据库。然后为它提供一个JSON，其中包括新创建的用户以及生成的ID号。然后，我将该用户推送到本地数组，并将其添加到表中。我想将用户添加到数组中时，它仍然保持动画，但会在添加到数组中后立即出现，并且不会出现长时间延迟，因为它使用了以前的delay变量。

此外，我还想提供一种方法，当用户单击删除时，可以从视图中删除这些元素，然后让表反映更改，而无需刷新整个表并再次触发所有行动画。

在新生成的元素上重置惊人的动画延迟

0 个答案: