브라우저에서 보이는 화면
각 조각은 마우스로 움직일 수 있다.
이동 시 css 의 transform:translate(X,Y) 를 사용
chrome 디버거의 layers 에서 보이는 화면
will-change: transform; 를 설정 안함
가로 기준으로 라인의 여러 요소가 협쳐져서 레이어가 존재함.
조각 이동 시 해당 라인의 요소들도 같이 영향을 받는 듯.
will-change: transform; 를 설정 함.
각 조각 별로 레이어가 존재함
조각 이동 시 각 조각만 영향을 받음.
레이어로 만들어지면
composite layers (
참고 )
로 동작해서 레이어 기준으로 화면 그리는 데 최적화 한다고 함.
will-change: transform; 사용 시 주의
요소를 레이어로 만들기에 그만큼 메모리 많이 먹는다.
테스트 해보고 상황에 맞춰서 적용하라.
좀 더 테스트
200개의 조각을 준비
1. 이동 될 수 있는 모든 요소에 will-change: transform; 적용
=> 모바일 크롬에서 버버벅인다.
.element-move-target{
will-change: transform;
}
2. will-change: transform; 적용 안함
=> 1번보다 덜 하지만 버벅인다
3. 이동하는 요소만 적용
=> 제일 부드럽다. 적용된 요소 1개만 레이어로 동작한다.
-> 최초 클릭시 딜레이가 조금 느껴진다
.element-move-body.moving .element-move-target{
will-change: auto;
}
.element-move-target:hover,
.element-move-target:active,
.element-move-target.element-move-target-moving{
will-change: transform;
}
