为什么交换元素时只触发一个动画？

Question

我正在尝试在拖放时对 *ngFor 元素的交换进行动画处理。尽管两个元素的状态在 drop 处理程序中都发生了变化（letter.animation = 'none' -> 'swapped' 只触发了一个动画。

我尝试删除发生交换的行 ([this.letters[previousIndex], this.letters[currentIndex]] = [this.letters[currentIndex], this.letters[previousIndex]];) 并且两个元素都被动画化了。但是我不明白为什么当我添加交换时只有一个触发器。是时间问题吗？

StackBlitz 示例代码在这里： https://stackblitz.com/edit/angular-zqclw5

谢谢！

Answer 1

您对时间问题的预感起作用了...添加了 setTimeout 以获得您想要的效果：

app.component.ts中的更新函数：

  drop(e) { 
    e.preventDefault();
    const previousLetter: MyInterface = this.letters.filter((l) => l.id === e.dataTransfer.getData("text/plain"))[0];
    const currentLetter: MyInterface = this.letters.filter((l) => l.id === e.target.id)[0];
    const previousIndex: number = this.letters.indexOf(previousLetter);
    const currentIndex: number = this.letters.indexOf(currentLetter);
    [this.letters[previousIndex], this.letters[currentIndex]] = [this.letters[currentIndex], this.letters[previousIndex]];
    previousLetter.animation = 'swapped'; 
    setTimeout(()=>{
      currentLetter.animation = 'swapped' ; 
    },5);
    console.log("After [p]:",previousLetter.name, " [c]:", currentLetter.name);
    }

演示stackblitz here