Css переход-свойство: преобразование только?

Я хотел бы, чтобы оживить врезку с CSS переходомCss переход-свойство: преобразование только?

.site-config 
    flex: 0 1 0 
    overflow: hidden 
    transform: translateX(100%) 
    transition: all .4s ease-in 
    &.active 
    flex: 2 1 40% 
    transform: translateX(0)

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

В конце концов, я пробовал transition: transform .5s ease, но он не работает.

Update

В настоящее время transition: transform работает, но довольно unepected время от времени. Краткая справка видео http://screencast-o-matic.com/watch/cDlDYKQZCY

источник

2016-12-16 Sergey Khmelevskoy

«переход: все» медленно, и вы должны нацелиться именно на то, что вы пытаетесь перевести. Если у вас по-прежнему возникают проблемы с производительностью, попробуйте перейти от 'translateX' к' translate3d'. Если аппаратное ускорение включено, оно должно повысить производительность. –

@Press Не X - это просто ярлык для 3d? Я думаю, что перевод также ускорен. Вот как это работает с переводом сейчас, совершенно неожиданно. Я не уверен, почему http://screencasto-o-matic.com/watch/cDlDYKQZCY –

IIRC X - это сокращение для перевода (x, y) и по-прежнему 2D, поэтому никакого ускорения. –

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

Также переместите переход с 2D на 3D, используя translate3d(x,y,z) вместо translateX(x), чтобы использовать аппаратное ускорение при включении/наличии.

источник

2016-12-16 21:03:34

Css переход-свойство: преобразование только?

ответ

Смежные вопросы