Wie schreibe ich CSS-Animationen in JS? Wie schreibe ich CSS-Animationen in JS (Code)

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man CSS-Animationen in JS schreibt. Die Methode (Code) zum Schreiben von CSS-Animationen in JS hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Verwenden Sie setTimeout() oder setInterval(), um einen Codeabschnitt regelmäßig mit diesen beiden Funktionen aufzurufen. Das ist das Prinzip.

Der Zweck besteht darin, den Inline-Stil wiederholt zu ändern, um den Effekt einer Animation zu erzielen

Indem gleichzeitig der Inhalt eines Frames erstellt und dann das CSS unter der Aktion kontinuierlich geändert wird des Funktionswerts, um den Effekt einer Animation zu erzielen

js schreibt CSS-Animation

// 将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);    // 在结束的时候回调
        }
    }
}

Fragen Sie den berechneten Stil ab

getComputedStyle(e)

275 Stile. . . O__O "…

Skriptfähige CSS-Klassen

Zusätzlich zur Skripterstellung für Inline-Stile können Sie auch Skript-CSS-Klassen erstellen

Klassen entfernen und hinzufügen

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

Klasse anzeigen list

classList
Schreibgeschütztes Attribut, gibt eine Echtzeitsammlung von Elementklassenattributen zurück

e.classList()

Skriptfähiges Stylesheet

Stile ein- und ausschalten Das CSSStyleSheet-Objekt der

Stil- und Linkelemente definiert ein deaktiviertes Attribut, das in js festgelegt und abgefragt werden kann.

In Bezug auf das deaktivierte Attribut ist dieses Attribut nicht Teil der Spezifikation in HTML und nicht Teil des HTML Die Spezifikation ist vorhanden, das Attribut ist jedoch im DOM vorhanden. Dieses Attribut kann nicht in einem Tag, aber in einem Skript festgelegt werden.

Wenn der Wert wahr ist, wird das Stylesheet geschlossen, andernfalls ist das Stylesheet aktiviert 🎜>

e.disabled = true;

Auf diese Weise kann das Stylesheet geschlossen werden

Ebenso kann es auch über die folgenden Methoden abgefragt werden: Einfügen und Löschen von Stylesheet-Regeln

CSSStyleSheet-Objekte Auch zum Abfragen definiert. , API zum Einfügen und Löschen von Stylesheet-Regeln

Alle Stylesheet-Inhalte abfragen

document.styleSheets[0].disabled;

document.styleSheets[0] Ein schreibgeschütztes Attribut, das einen Link zum Dokument zurückgibt oder ein eingebettetes Stylesheet

Dieser Stil ist schreibgeschützt und kann nicht eingefügt oder gelöscht werden

wobei selectorText der CSS-Selektor ist

cssText ist der CSS-Textstil

Regeln hinzufügen und löschen

insertRule() und deleteRule() sind zwei Methoden zum Hinzufügen und Löschen von Regeln

Es gibt auch eine addRule()-Methode

insertRule()-Methode

insertRule() und deleteRule() Diese beiden Methoden ermöglichen das Hinzufügen und Löschen von Regeln

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

Fügen Sie im SS-Stylesheet eine CSS-Regel im 0. cssRules hinzu, um die Schriftart des Klassennamens blau zu machen

wenn hinzugefügt. Wenn der Index bereits vorhanden ist, wird er nicht um 1 erhöht und dann

deleteRule()-Methode

Stilregel löschen

Löschen Sie den zuletzt eingefügten Index Stil

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

Löschen Sie die 0. Regel und der Stil beginnt weiterhin bei 0

Erstellen Sie ein neues Stylesheet

Das ist nicht schwierig, fügen Sie direkt ein neues Stilelement ein und fügen Sie es über den innerHTML-CSS-Inhalt in den neuen Stil ein oder fügen Sie direkt das Link-Tag ein, fügen Sie mit der Methode Element.setAttritube() ein HTML-Attribut hinzu, legen Sie den rel-Wert im Stylesheet fest und fügen Sie dann das src-Attribut

auf die gleiche Weise. Die Bedienung von dom und bom erfordert keinen Stylesheet-Inhalt

Verwandte Empfehlungen:

Was schneller ist, CSS oder JS animation_html/css_WEB- ITnose

Nachdem die CSS-Animation beendet ist, kann js den übersetzten Wert nicht ändern._html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS-Animationen in JS? Wie schreibe ich CSS-Animationen in JS (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!