Question

我有一个用于设置项目清单动画的设置，例如获取第一个项目并添加到末尾，将其他所有项目移动到相邻位置。当我删除最后一个项目并将其添加为第一个项目时，动画看起来就像项目将彼此在同一方向上移动的所有项目相互推动。但是，如果我做相反的事情（将第一个添加到末尾），则动画显示带有过渡动画的第一个项目移动到最后一个位置，而没有过渡动画的所有其他项目只是跳到下一个位置。如果我删除第一个项目并在末尾添加一个新项目（请参阅ts中的注释行），则看起来就像第一种情况一样，每个项目都具有动画效果。

造成不同行为的原因是什么，如何在不必为一个案例创建新实例的情况下实现相同行为？

我将div绑定到具有如下定义的css过渡的数组：

<div
  class="nav"
  id="main-menu"
  (panleft)="swipeLeft()"
  (panright)="swipeRight()"
>
<div class="item" *ngFor="let item of menuItems">{{ item.text }}</div>
</div>

css：

.nav .item {
    width: 90px;
    height: 90px;
    line-height: 90px;
    border-radius: 100%;
    background: #dadada;
    text-align: center;
    position: absolute;
    transition: all ease 0.3s;
}

.nav .item:nth-child(1) {
    top: -90px;
    left: 10px;
}
.nav .item:nth-child(2) {
    top: 10px;
    left: 10px;
}
.nav .item:nth-child(3) {
    top: 110px;
    left: 10px;
}
.nav .item:nth-child(4) {
    top: 210px;
    left: 10px;
}
.nav .item:nth-child(5) {
    top: 210px;
    left: 110px;
}
.nav .item:nth-child(6) {
    top: 210px;
    left: 210px;
}
.nav .item:nth-child(7) {
    top: 210px;
    left: 310px;
}
.nav .item:nth-child(8) {
    top: 210px;
    left: 410px;
}

并将滑动事件定义为：

 swipeLeft() {
    if (this.leftPanCount > 13) {
      this.leftPanCount = 0;
      let x = this.menuItems.shift();
      //this.menuItems.push(new MenuItem(x.id, x.text));
      this.menuItems.push(x);
    }
    this.leftPanCount++;
  }

  swipeRight() {
    if (this.rightPanCount > 13) {
      this.rightPanCount = 0;
      let x = this.menuItems.pop();
      this.menuItems.unshift(x);
    }
    this.rightPanCount++;
  }

小提琴位于：https://stackblitz.com/edit/angular-qebmgd，请尝试左右拖动菜单项，以查看动画的差异。

在两个方向上移动数组时，css过渡效果不一样

0 个答案: