수색…
변형 및 불투명도를 사용하여 트리거 레이아웃 방지
일부 CSS 속성을 변경하면 스타일 및 레이아웃을 동 기적으로 계산하도록 브라우저가 트리거되므로 60fps로 애니메이션을 적용해야하는 경우에는 좋지 않습니다.
하지 마라.
left
및 top
트리거 레이아웃으로 애니메이트하십시오.
#box {
left: 0;
top: 0;
transition: left 0.5s, top 0.5s;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
}
#box.active {
left: 100px;
top: 100px;
}
데모는 그림을 위해, 렌더링 9.8ms을 11.7ms했다
해야 할 것
동일한 애니메이션으로 transform
애니메이션.
#box {
left: 0;
top: 0;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
transition: transform 0.5s;
transform: translate3d(0, 0, 0);
}
#box.active {
transform: translate3d(100px, 100px, 0);
}
데모 같은 애니메이션, 회화, 2.0ms 렌더링에 1.3ms했다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow