서버 응답을 기반으로 CSS @-keyframes 애니메이션을 동적으로 만드는 방법은 무엇입니까?

CSS @-keyframes 애니메이션을 동적으로 생성

시나리오

div를 회전하고 서버 응답에 따라 결정된 특정 위치에서 중지해야 하는 경우 . 회전 및 중지에 기본 JS를 사용하면 CPU 리소스가 과도하게 소모됩니다.

해결책

회전에 CSS 애니메이션을 활용하지만 중지 위치를 지정하려면 동적으로 정의된 클래스가 필요합니다.

@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}

구현

이전 버전을 재정의하기 위해 스타일시트 규칙을 동적으로 삽입 스타일:

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@-webkit-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}\
@-moz-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}';
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

A_DYNAMIC_VALUE를 원하는 정지 위치(예: "180deg")로 바꾸고 스타일 요소를 문서 헤드에 추가하여 애니메이션을 동적으로 적용합니다.

위 내용은 서버 응답을 기반으로 CSS @-keyframes 애니메이션을 동적으로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!