js에서 CSS 애니메이션을 작성하는 방법은 무엇입니까? js에서 CSS 애니메이션을 작성하는 방법(코드)-JS 튜토리얼-php.cn

이 글의 내용은 JS에서 CSS 애니메이션을 작성하는 방법에 관한 것입니다. JS에서 CSS 애니메이션을 작성하는 방법(코드)은 참고할만한 가치가 있으니 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.

이 두 함수를 사용하여 정기적으로 코드 조각을 호출하려면 setTimeout() 또는 setInterval()을 사용하세요. 이것이 원칙입니다.

애니메이션 효과를 얻기 위해 인라인 스타일을 반복적으로 수정하는 것이 목적입니다

프레임의 내용을 동시에 구성한 다음 함수의 동작 애니메이션 효과를 얻기 위해 CSS 값을 지속적으로 변경

js CSS 애니메이션 작성

// 将e转化为相对定位的元素，使得其可以左右移动
// 第一个参数为元素对象或者元素的id
// 如果第二个参数是函数，以e为参数，它将在动画结束时调用
// 第三个参数指定e移动的距离，默认为5像素
// 第四个参数指定移动多久，默认500毫秒
function shake(e, oncomplete, distance, time) {
    // 句柄函数
    if (typeof e === "string") e = document.getElemnentById(e);    // 如果传入的是对象的id则获取对象的id，如果传入的为元素（元素为对象）则直接跳过这一句
    if (!time) time = 500;    // 如果time是空值，则直接使用默认值
    if (!distance) distance = 5;    // 如果未指定移动的距离，则默认为5像素

    var originalStyle = e.style.cssText;    // 获取元素e的css样式
    e.style.position = "relative";    // 设置为相对定位
    var start = (new Date()).getTime();    // 设置动画开始的时间,获取一个格林威治时间
    animate();    // 动画开始

    // 函数检查消耗时间，并更新e的位置
    // 如果动画完成，它将e还原为原始状态
    // 否则，将会更新e的位置，安排其自身重新运行
    function animate() {
        var now = (new Date()).getTime();    // 获取现在的时间
        var elapsed = now-start;    // 从开始以来消耗了多长时间
        var fraction = elapsed / time;    // 为总时间的几分之几

        if (fraction < 1) {    // 如果动画未完成
            // 作为动画完成比例的函数，计算e的x位置
            // 使用正弦函数将完成比例乘以4pi
            // 所以，它将来回往返两次
            var x = distance * Math.sin(fraction * 4 * Math.PI);     // 使用正弦函数实现每秒四帧
            e.style.left = x + "px";

            // 在25毫秒后或在总时间的最后尝试再次运行函数
            // 目的是为了产生每秒40帧动画
            setTimeout(animate, Math.min(25, time-elapsed));    // 使用天花板函数再次调用，再次移动
        }
        else {    // 否则动画完成
            e.style.cssText = originalStyle; // 恢复原始样式
            if (oncomplete) oncomplete(e);    // 产生一个回调函数
        }
    }
}

// 以毫秒级的时间将e从完全不透明淡出到完全透明
// 在调用函数时假设e是完全不透明的
// oncomplete 是一个可选函数，以e为参数，它将在动画结束的时调用
// 如果不指定time，默认为500毫秒
function fadeOut(e, oncomplete, time) {
    if (typeof e === "string") e = document.getElementById(e);
    if (!time) time = 500;

    // 使用Math.sqrt作为一个缓动函数创建动画
    // 非线性函数，一开始淡出的较快，然后逐步的缓慢
    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));    // 在25毫秒之后或者在总时间的最后再次调用
        }else {
            e.style.opacity = "0";    // 使得e完全透明
            if (oncomplete) oncomplete(e);    // 在结束的时候回调
        }
    }
}

로그인 후 복사

계산된 스타일 쿼리# 🎜🎜#

getComputedStyle(e)

로그인 후 복사

275개 스타일. . . O__O "…

스크립팅 가능한 CSS 클래스

인라인 스타일 스크립팅 외에도 CSS 클래스 스크립팅도 가능합니다

Remove, 클래스 추가#🎜🎜 #

e.className = "attention";  // 添加类
e.className = "";   // 移除类

로그인 후 복사

클래스 목록 표시

classList

읽기 전용 속성, 요소 클래스 속성의 실시간 컬렉션 반환

e.classList()

로그인 후 복사

스크립트.

스타일 시트 켜기 및 끄기

스타일 및 링크 요소의 CSSStyleSheet 개체는 js에서 설정하고 쿼리할 수 있는 비활성화된 속성을 정의합니다.

정보. .disabled 속성은 HTML 사양의 일부가 아니며 HTML에 존재하지 않습니다. 그러나 이 속성은 태그에 설정할 수 없지만 스크립트 #🎜🎜에 설정할 수 있습니다. #값이 true이면 스타일 시트가 닫히고, 그렇지 않으면 스타일 시트가 열립니다

e.disabled = true;

로그인 후 복사

이런 식으로 스타일 시트를 닫을 수 있습니다

마찬가지로 닫을 수도 있습니다 다음과 같은 방법으로 닫아야 합니다

document.styleSheets[0].disabled;

로그인 후 복사

#🎜. 🎜#스타일 시트 규칙 삽입 및 삭제

CSSStyleSheet 객체는 스타일 시트 규칙을 쿼리, 삽입 및 삭제하기 위한 API도 정의합니다#🎜 🎜#

모든 스타일 시트 내용 쿼리# 🎜🎜#

var firstRule = document.styleSheets[0].cssRules[0];

로그인 후 복사

document.styleSheets[0] 문서에 대한 링크 또는 포함된 스타일 시트를 반환하는 읽기 전용 속성

이 스타일은 읽기 전용이므로 삽입하거나 삭제할 수 없습니다.#🎜 🎜#

여기서 selectorText는 CSS 선택기입니다

cssText는 CSS 텍스트 스타일입니다

규칙 추가 및 삭제#🎜 🎜#

insertRule() 및 deleteRule() 규칙을 추가하고 삭제하는 두 가지 방법

addRule() 방법도 있습니다

insertRule() 방법
#🎜 🎜#insertRule() 및 deleteRule() 규칙 추가 및 삭제 메소드

ss.insertRule(".name {color:blue}", 0);

로그인 후 복사

ss 스타일 시트에서 0번째 cssRules에 CSS 규칙을 추가하여 클래스 이름의 글꼴을 파란색으로 만듭니다#🎜🎜 #추가된 인덱스가 이미 존재한다면 덮어쓰지 않고 모든 인덱스를 1씩 증가시킨 후 삽입합니다

deleteRule() 메소드
#🎜🎜 #스타일 규칙 삭제

이전에 삽입된 스타일 삭제#🎜 🎜#

ss.deleteRule(0);

로그인 후 복사

0번째 규칙을 삭제하면 스타일은 0부터 계속됩니다

새 스타일 시트 만들기#🎜 🎜#

어려운 일이 아닙니다. 새 스타일을 직접 삽입하면 됩니다. 요소는 innerHTML을 통해 새 CSS 콘텐츠를 삽입하거나, 링크 태그를 직접 삽입하여 html 속성을 설정하고 추가하려면 Element.setAttritube() 메서드를 사용하세요. rel 값을 스타일시트에 설정한 다음 동일한 방식으로 src를 추가합니다.

스타일 시트 콘텐츠와 관련되지 않은 순수 dom 및 bom 작업