CSS анимацията трепти при transform: 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
Тези не винаги проблеми често са свързани с компютъра, като например графичните карти (или процесорът) са били заети и са се повредили ... пробвали ли сте на друго устройство, може би с повече конски сили< /i>?   -  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 */

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

transform: translate3d(463.484px, 0px, 0px) scaleX(0.32);
person vals    schedule 23.03.2017
comment
Току-що видях, че е подчертана анимация, а не текст, така че мащабът ще бъде напълно наред :) ...+1 - person Ason; 23.03.2017
comment
Между другото, тъй като се движите само по оста x, пробвали ли сте някога дали none 3d translate работи по-добре? - person Ason; 23.03.2017
comment
@LGSon Обикновено 3D трансформацията ще използва GPU, а обикновено 2D трансформацията ще използва CPU, така че вероятно 3D е по-добре. Но все пак ще е по-добре да тестваме конкретния случай. - person vals; 23.03.2017