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을 시도했지만 작동하지 않습니다.

업데이트

현재 transition: transform 작동하지만 때때로 아주 unepected. 당신이 성능이 저하 될 수 transition: all를 사용하여 피하려고한다 코멘트에서 설명하고있는 바와 같이 짧은 비디오 레퍼런스 http://screencast-o-matic.com/watch/cDlDYKQZCY

출처

2016-12-16 Sergey Khmelevskoy

'전환 : 모두'가 느리며 전환하려는 대상을 정확히 타겟팅해야합니다. 그래도 성능 문제가 있다면'translateX'에서'translate3d'로 옮겨보십시오. 하드웨어 가속을 사용하면 성능이 향상됩니다. –

@Press X가 3D의 바로 가기가 아닌가? 나는 번역이 GPU 가속화라고 생각한다. 그것이 바로 번역과 함께 작동하는 방법입니다. 왜 모르겠어요 http://screencast-o-matic.com/watch/cDlDYKQZCY –

IIRC X는 translate (x, y)의 줄임말이고 2D이므로 여전히 가속이 아닙니다. –

. 귀하의 전환과 가능한 한 구체적으로 노력하십시오.

또한 translateX(x) 대신 translate3d(x,y,z)을 사용하여 2D에서 3D로 전환을 이동하여 사용/사용 가능할 때 하드웨어 가속을 사용하십시오.

출처

2016-12-16 21:03:34

답변

관련 문제