css删除动画

Question

假设有一列从上往下排列的div，每个div里面一个删除按钮，点击删除按钮当前div左移出视野

transition: transform 0.5s;
transform: translateX(-350px);

transition结束后通过removeChild()方法彻底删除当前div。
当前情况是动画完毕删除当前div后，下面的的所有div会突然蹦上来，很不美观
想实现的效果是当前div删除后余下的div能有一个向上移动的动画

Answer 1

1. 可以先不删当前节点，先给后面的节点加个 transform: translateY(-行高），让下面的节点动画上移。最后再干掉所有动画样式和已删节点。
2. 不过动画这个东西，初看很酷炫，用多了其实很干扰，建议用简单一些的方案，比如被删的 fadeOutLeft，其它自动上移，利用用户关注动画的时机减少动画数量。

Answer 2

可以加上一些可以影响后面元素位置的过渡属性，在左移动画结束之后执行，比如

margin-top: -自身高度;
transition: margin-top .5s .5s, transition .5s; /* margin-top 延迟.5s */

或者

height: 0;
transition: height .5s .5s, transition .5s; /* height 延迟.5s */