Question

我正在悬停中更改弯曲方向，但是我希望它应该平滑完成，但它在更改方向时会产生冲击或冲击。我还使用了过渡和动画，但仍然显示错误。

.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进行动画处理（大多数动画可以单独执行这两个操作。

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

对元素进行不可见的克隆，将要设置动画的属性更改为新值，将其宽度和高度设置为与原始值相同的确切位置。
使用translate对从当前位置到克隆位置中涉及的元素进行动画处理
用克隆替换原始文件（并使克隆可见）。

Answer 2

一个快速的Google搜索提供了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属性

无法平滑地为flexbox方向设置动画

2 个答案: