CSS3过渡，用于由中心对齐引起的水平移位

Question

我有一个由5个中心对齐的框（图像）组成的栏：

.boxes {
display:inline-block;
text-align: center;
}

单击这些框后，显示将变为无（通过简单的js样式更改），并且由于中心对齐，其余框将水平移向中间。 我希望此运动具有CSS3过渡-像这样

    transition: translate 1s linear;

是否有可能做到这一点？

Answer 1

text-align不是可动画的CSS属性之一 。 因此，不能，您不能转换text-align 。

为了完成您想要的工作，您很可能必须绝对定位每个盒子，当它们彼此相邻时，用JS计算它们的位置，然后在移除其中一个盒子时计算它们的位置。
然后，您可以通过更改可设置动画的left ， right属性来转换它们。