Не может плавно анимировать направление flexbox - PullRequest
Новая
       21

Не может плавно анимировать направление flexbox

0 голосов
/ 05 января 2019

Я меняю flex-направление при наведении, но я хочу, чтобы это было сделано плавно, но это вызывает шок или рывок в изменении направления. Я также использовал переход и анимацию, но она все еще показывает ошибку. 

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

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Быстрый поиск в 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.

0 голосов
/ 05 января 2019

flex-direction не анимация .

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

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

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

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