자 우리가 애니메이션을 작성하다 보면 가끔씩 잘 작동하지 않고 흔들리면서 나오는 경우가 있다.
우리가 그럴 때 1줄로 해당 현상을 해소할 수 있는 방법을 알아보자. (코드 자체에 문제가 있는 경우 위 속성을 적용해도 효과가 없습니다. 코드 자체에 문제가 없는 경우 위 속성이 효과가 있습니다)
예시코드
.open-post__heart-count:hover i {
will-change: transform;
}자 난 이렇게 작성했는데 아래 코드 템플릿을 보고 본인 코드에 맞게 작성하길 바란다.
코드 템플릿
(class 또는 id) {
will-change: (애니메이션 효과에서 바뀌는 부분(예.transform))
}자 이렇게 해서 위 코드를 추가했다면 애니메이션의 문제인 흔들림이 없어졌을 것 이다.
하지만 모든 애니메이션에 위 코드가 필요한 것은 아니다. 개발자가 직접 보고 문제가 있는 것으로 판단될 때만 위 코드를 넣어주면 되는데, 위 코드가 작동하는 원리를 아래서 다뤄 보겠다.
코드 작동 원리
위 코드는 그래픽카드를 가속화해서 애니메이션을 조금 더 좋게 보이도록 하는 역할을 해준다. 위 코드가 작동하는 원리를 한줄로 소개하자면 그래픽카드를 가속화해서, 이렇게 말해주고 싶다.
한줄 정리
1. 만약 애니메이션을 작성했는데 애니메이션이 정상적으로 출력되지 않는다면(흔들림 등.)
will-change: (애니메이션 바뀌는 부분); 코드를 작성해주면 된다.
2. 위 코드가 작동하는 원리는 그래픽카드를 가속화하는 원리이다.
3. 모든 애니메이션에 위 코드를 넣지 않아도 된다.위 포스팅중 일부 내용의 경우 '노마드코더' 강의를 참고했음을 알립니다.
