Анимация CSS мерцает при преобразовании: translate3d вместе с шириной

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

.active-bar {
    transition: all 0.3s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

Этот бар имеет анимацию ниже, рассчитанную динамически.

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

to 

transform: translate3d(20px, 0px, 0px);
width: 254px;

Но есть мерцание, которое я вижу иногда, но не всегда. Какое решение мне нужно использовать, чтобы избежать мерцания.


css css-animations css-transitions css-transforms
person Baraneedharan    schedule 23.03.2017    source источник
comment
Эти не всегда проблемы часто связаны с компьютером, например, графические карты (или процессор) были заняты и перестали работать... пробовали ли вы использовать другое устройство, возможно, с большей мощностью< /я>?   -  person Ason    schedule 23.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы сделать переход более плавным (и менее зависимым от процессора), используйте только преобразование и фиксированную ширину. Измените этот динамический стиль:

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

to 

width: 100px;   /* fixed in the element */

и динамическая часть (которая получит ширину 32 пикселя)

transform: translate3d(463.484px, 0px, 0px) scaleX(0.32);
person vals    schedule 23.03.2017
comment
Я только что видел, что это была анимация подчеркивание, а не текст, так что масштаб будет в порядке :) ...+1 - person Ason; 23.03.2017
comment
Кстати, поскольку вы двигаетесь только по оси x, вы когда-нибудь проверяли, работает ли translate none 3d лучше? - person Ason; 23.03.2017
comment
@LGSon Обычно для 3D-преобразования используется графический процессор, а для 2D-преобразования обычно используется ЦП, поэтому, вероятно, 3D лучше. Но лучше все-таки проверить на конкретном случае. - person vals; 23.03.2017