javascript - 由中心对齐引起的水平偏移的 CSS3 过渡

Question

我有一个由 5 个居中对齐的框(图片)组成的栏:

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

单击这些框时，显示变为无(通过简单的 js 样式更改)，其余框由于居中对齐而水平向中间移动。 我想为这个 Action 添加一个 CSS3 过渡 - 就像这样

    transition: translate 1s linear;

这有可能吗？

Answer 1

text-align 不是 animatable CSS properties 之一.所以不，你不能转换 text-align。

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