css - 无法平滑地设置 Flexbox 方向的动画

Question

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

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

Answer 1

flex-direction 不是 animatable .

你无法顺利地从一种值(value)观过渡到另一种值(value)观。因此，您需要使用上面链接中的任何属性来设计不同的动画。

注意:如果您希望动画轻松并在任何设备上顺利运行，则应尝试仅使用 transform 和 opacity 制作动画>(大多数动画可以单独使用这两个来执行)。

---

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

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