是否可以在javascript运行时显示动画

Question

我有一个任务来排序元素列表，其中包括动画它们。 代码是这样的：

if(condition(first, next)) {
  first.className = 'fadeOut';
  // some manipulation of both elements
  next.className = 'fadeIn';

css是：

.element {  
  transition: all 1s ease-in 0s;
  -webkit-transition: 1s ease-in;
  -moz-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;
}

并且过渡是

@keyframes fadeIn {to {opacity: 1;}}
@keyframes fadeOut {to {opacity: 0;}}
.fadeIn {opacity: 0;animation: fadeIn 2s ease-in 1 forwards;}
.fadeOut{opacity: 1;animation: fadeOut 2s ease-in 1 forwards;}

我期望看到动画在第一个元素上运行，然后是正在执行的代码，然后是第二个元素上的动画。我看到的有效的是代码运行和元素排序，但动画不会在序列中触发。 我已经尝试添加超时以使每一步等待下一步，但这并没有帮助。

谁能告诉我哪里出错了？有没有办法让代码暂停足够长的时间才能看到每个动画？