Css Can'；t平滑设置flexbox方向的动画

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

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

---

flex direction

不适用

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

注意：若你们想让你们的动画在任何设备上都轻巧流畅，你们应该尝试只使用

变换
和
不透明度
来制作动画（大多数动画都可以用这两个单独执行）


但是，有一种解决方案通常适用于不可设置动画的特性。它包括以下步骤：

制作元素的不可见克隆，将要设置动画的属性更改为新值，宽度和高度相同，并将其放置在与原始元素相同的精确位置
使用
translate
将原始版本替换为克隆（并使克隆可见）
一个快速的谷歌搜索给出了（不是我的），它似乎实现了您的目标，增加了一点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 });    
    } 
}

函数布局（）{
group.classList.toggle（“重新排序”）；
对于（变量i=0；i

对于flex布局中的每个元素，它采用最后的x和y坐标，以及布局方向更改后的当前坐标，并基于这两个坐标，动画转换并使用
transform
css属性。
它显示了什么错误？这在改变flex方向方面造成了很大的冲击亲爱的用户我只是一名学生，但请告诉我添加脚本的正确方法亲爱的用户，我只是一名学生，但请告诉我添加脚本的正确方法。我还没有添加任何脚本，如果你告诉我这对我有好处。（谢谢）