이 글의 내용은 JS에서 CSS 애니메이션을 작성하는 방법에 관한 것입니다. JS에서 CSS 애니메이션을 작성하는 방법(코드)은 참고할만한 가치가 있으니 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.
이 두 함수를 사용하여 정기적으로 코드 조각을 호출하려면 setTimeout() 또는 setInterval()을 사용하세요. 이것이 원칙입니다.
애니메이션 효과를 얻기 위해 인라인 스타일을 반복적으로 수정하는 것이 목적입니다
프레임의 내용을 동시에 구성한 다음 함수의 동작 애니메이션 효과를 얻기 위해 CSS 값을 지속적으로 변경
js CSS 애니메이션 작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | function shake(e, oncomplete, distance, time) {
if (typeof e === "string" ) e = document.getElemnentById(e);
if (!time) time = 500;
if (!distance) distance = 5;
var originalStyle = e.style.cssText;
e.style.position = "relative" ;
var start = ( new Date ()).getTime();
animate();
function animate() {
var now = ( new Date ()).getTime();
var elapsed = now-start;
var fraction = elapsed / time;
if (fraction < 1) {
var x = distance * Math.sin(fraction * 4 * Math.PI);
e.style.left = x + "px" ;
setTimeout(animate, Math.min(25, time-elapsed));
}
else {
e.style.cssText = originalStyle;
if (oncomplete) oncomplete(e);
}
}
}
function fadeOut(e, oncomplete, time) {
if (typeof e === "string" ) e = document.getElementById(e);
if (!time) time = 500;
var ease = Math.sqrt;
var start = ( new Date ()).getTime();
animate();
function animate() {
var elapsed = ( new Date ()).getTime()-start;
var fraction = elapsed/time;
if (fraction < 1) {
var opacity = 1 - ease(fraction);
e.style.opacity = String(opacity);
setTimeout(animate,
Math.min(25, time-elapsed));
} else {
e.style.opacity = "0" ;
if (oncomplete) oncomplete(e);
}
}
}
|
로그인 후 복사
계산된 스타일 쿼리# 🎜🎜#
275개 스타일. . . O__O "…
스크립팅 가능한 CSS 클래스
인라인 스타일 스크립팅 외에도 CSS 클래스 스크립팅도 가능합니다
Remove, 클래스 추가#🎜🎜 #
1 2 | e.className = "attention" ;
e.className = "" ;
|
로그인 후 복사
클래스 목록 표시
classList
읽기 전용 속성, 요소 클래스 속성의 실시간 컬렉션 반환
스크립트.
스타일 시트 켜기 및 끄기
스타일 및 링크 요소의 CSSStyleSheet 개체는 js에서 설정하고 쿼리할 수 있는 비활성화된 속성을 정의합니다.
정보. .disabled 속성은 HTML 사양의 일부가 아니며 HTML에 존재하지 않습니다. 그러나 이 속성은 태그에 설정할 수 없지만 스크립트 #🎜🎜에 설정할 수 있습니다. #값이 true이면 스타일 시트가 닫히고, 그렇지 않으면 스타일 시트가 열립니다
이런 식으로 스타일 시트를 닫을 수 있습니다
마찬가지로 닫을 수도 있습니다 다음과 같은 방법으로 닫아야 합니다
1 | document.styleSheets[0].disabled;
|
로그인 후 복사
#🎜. 🎜#스타일 시트 규칙 삽입 및 삭제
CSSStyleSheet 객체는 스타일 시트 규칙을 쿼리, 삽입 및 삭제하기 위한 API도 정의합니다#🎜 🎜#
모든 스타일 시트 내용 쿼리# 🎜🎜#
1 | var firstRule = document.styleSheets[0].cssRules[0];
|
로그인 후 복사
document.styleSheets[0] 문서에 대한 링크 또는 포함된 스타일 시트를 반환하는 읽기 전용 속성
이 스타일은 읽기 전용이므로 삽입하거나 삭제할 수 없습니다.#🎜 🎜#
여기서 selectorText는 CSS 선택기입니다
cssText는 CSS 텍스트 스타일입니다
규칙 추가 및 삭제#🎜 🎜#
insertRule() 및 deleteRule() 규칙을 추가하고 삭제하는 두 가지 방법
addRule() 방법도 있습니다
insertRule() 방법
#🎜 🎜#insertRule() 및 deleteRule() 규칙 추가 및 삭제 메소드
1 | ss.insertRule( ".name {color:blue}" , 0);
|
로그인 후 복사
ss 스타일 시트에서 0번째 cssRules에 CSS 규칙을 추가하여 클래스 이름의 글꼴을 파란색으로 만듭니다#🎜🎜 #추가된 인덱스가 이미 존재한다면 덮어쓰지 않고 모든 인덱스를 1씩 증가시킨 후 삽입합니다
deleteRule() 메소드
#🎜🎜 #스타일 규칙 삭제
이전에 삽입된 스타일 삭제#🎜 🎜#
0번째 규칙을 삭제하면 스타일은 0부터 계속됩니다
새 스타일 시트 만들기#🎜 🎜#
어려운 일이 아닙니다. 새 스타일을 직접 삽입하면 됩니다. 요소는 innerHTML을 통해 새 CSS 콘텐츠를 삽입하거나, 링크 태그를 직접 삽입하여 html 속성을 설정하고 추가하려면 Element.setAttritube() 메서드를 사용하세요. rel 값을 스타일시트에 설정한 다음 동일한 방식으로 src를 추가합니다.
스타일 시트 콘텐츠와 관련되지 않은 순수 dom 및 bom 작업
관련 권장 사항: #🎜 🎜#
CSS 및 JS 어느 애니메이션이 더 빠름_html/css_WEB-ITnose
CSS 애니메이션이 끝난 후에는 js를 수정할 수 없습니다. 번역된 값입니다._html/css_WEB-ITnose
# 🎜🎜#
위 내용은 js에서 CSS 애니메이션을 작성하는 방법은 무엇입니까? js에서 CSS 애니메이션을 작성하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!