Не может плавно анимировать направление 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 не анимируется

Вы не можете плавно переходить от одного значения к другому. Поэтому вам нужно придумать другую анимацию, используя любое из свойств в ссылке выше.

Примечание. Если вы хотите, чтобы ваши анимации были легкими и плавно работали на любом устройстве, вы должны стараться только анимировать, используя transform а также opacity (большинство анимаций может быть выполнено только с этими двумя).

---

Тем не менее, есть решение, которое обычно работает с неанимаемыми свойствами. Он включает в себя следующие шаги:

1. Создайте невидимый клон элемента, изменив свойство, которое вы хотите анимировать, на новое значение с той же шириной и высотой и поместите его в то же точное положение, что и оригинал.
2. Анимируйте элементы, задействованные из их текущей позиции в позицию в клоне, используя translate
3. Замените оригинал клоном (и сделайте клон видимым).

Answer 2

Быстрый поиск в Google дал этот результат (не мой), который, кажется, достигает вашей цели с небольшим количеством дополнительного 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 });    
    } 
}

Для каждого элемента, находящегося в гибком макете, он принимает последние координаты x и y, а также текущие координаты после изменения направления макета и на основе этих двух анимирует переход и использует transform собственность css.