无法平滑地为 flexbox-direction 设置动画 [重复]

Question

我在悬停时改变 flex-direction，但我希望它应该顺利完成，但它在改变方向时会产生冲击或颠簸。 我也使用了过渡和动画，但它仍然显示错误。

.a {
   display:flex;
   flex-direction:column;
   transition:all 1 s linear;
 }
.a::hover {
   flex-direction:column-reverse;
   color: blue;
 }

Answer 1

flex-direction 不是animatable。

您无法从一个值平滑过渡到另一个值。因此，您需要使用上面链接中的任何属性来制作不同的动画。

注意：如果您希望您的动画在任何设备上都轻巧流畅，您应该尝试仅使用 transform 和 opacity 制作动画（大多数动画都可以使用这些两个人）。

---

但是，有一个解决方案通常适用于非动画属性。它涉及以下步骤：

1. 制作一个不可见的元素克隆，将要设置动画的属性更改为新值，宽度和高度相同，并将其放置在与原始元素相同的位置。
2. 使用translate 将涉及的元素从其当前位置动画到克隆中的位置
3. 用克隆替换原始（并使克隆可见）。

Answer 2

快速的谷歌搜索给出了this result（不是我的），这似乎通过一些额外的 javascript 和 TweenLite 库的使用来实现您的目标。主要逻辑位于layout()函数中：

function layout() {

    group.classList.toggle("reorder");  

    for (var i = 0; i < total; i++) {

        var box = boxes[i];

        var lastX = box.x;
        var lastY = box.y;   

        box.x = box.node.offsetLeft;
        box.y = box.node.offsetTop;

        // Continue if box hasn't moved
        if (lastX === box.x && lastY === box.y) continue;

        // Reversed delta values taking into account current transforms
        var x = box.transform.x + lastX - box.x;
        var y = box.transform.y + lastY - box.y;  

        // Tween to 0 to remove the transforms
        TweenLite.fromTo(box.node, 0.5, { x, y }, { x: 0, y: 0, ease });    
    } 
}

对于 flex 布局中的每个元素，它采用最后的 x 和 y 坐标，以及布局方向改变后的当前坐标，并基于这两个，动画过渡并使用 transform css 属性。