个人中心
gpt4 book ai didi

javascript - 在javascript中更改CSS动画

转载 作者：行者123 更新时间：2023-11-28 08:08:51 27 4
gpt4 key购买 nike

我的 html 中有一个闪烁的红色框，它使用 css 动画。我希望能够将它从闪烁的红色和白色更改为绿色和白色。我知道这可以通过使用 getElementbyId 在 id 元素上完成，但是如何访问 css 中的绿色胺化框。红色框看起来像这样:

@-webkit-keyframes 'noConnection' 
{
    1% { background-color: red; }
    33% { background: white; }
    66% { background: red; }
    100% { background: white; }
}

绿色是这样的:

@-webkit-keyframes 'Connection' 
{
    1% { background-color: green; }
    33% { background: white; }
    66% { background: green; }
    100% { background: white; }
}

动画看起来像这样:

#animate { 
    height: 15px; 
    width: 15px;
}
.cssanimations #animate {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: Connection;
    -webkit-animation-timing-function: ease;

而且我想我必须从 javascript 更改属性 -webkit-animation-name: 才能执行此操作，但我不知道如何获取它的句柄来更改它。还是我最好创建一个重复的 #animate 并使用 getElementById 重命名它？

最佳答案

这是一个简单的网页，演示了如何使用 Javascript 修改 CSS 动画。它包含一个简单的 div，一些 Javascript 使 div 在页面上随机移动。

在您的特定情况下，您只需修改调用“insertRule”的行即可插入新的闪烁规则。

<html><head><style></style></head>
<body>
    <div id="mymovingdiv">
        <h1>Moving Div</h1>
        <p>And some little text too</p>
    </div>

<script>
function animatedMove(id, xStart, yStart, xEnd, yEnd, secs)
{
    // Remove any CSS rules inserted by a previous call to this method
    let rulename = `AnimMove${id}`;
    let ss = document.styleSheets; // all stylesheets
    for (let i = 0; i < ss.length; ++i) { // for each stylesheet...
        for (let j = ss[i].cssRules.length - 1; j > 0; j--) { // for each rule...
            if (ss[i].cssRules[j].name === rulename) { // does the name match?
                ss[i].deleteRule(j);
            }
        }
    }

    // Insert a CSS rule for this animation
    document.styleSheets[0].insertRule(`@keyframes ${rulename} { 0% { left: ${xStart}px; top: ${yStart}px; } 100% { left: ${xEnd}px; top: ${yEnd}px } }`);

    // Remove any CSS rules inserted by a previous call to this method
    for (let i = 0; i < ss.length; ++i) { // for each stylesheet...
        for (let j = ss[i].cssRules.length - 1; j > 0; j--) { // for each rule...
            if (ss[i].cssRules[j].name === rulename) { // does the name match?
                ss[i].deleteRule(j);
            }
        }
    }

    // Insert a CSS rule for this animation
    document.styleSheets[0].insertRule(`@keyframes ${rulename} { 0% { left: ${xStart}px; top: ${yStart}px; } 100% { left: ${xEnd}px; top: ${yEnd}px } }`);

    // assign the animation to our element
    let el = document.getElementById(id);
    el.style.position = 'absolute';
    el.style.animation = `${rulename} ${secs}s`;

    // Make the element stay where the animation ends
    el.style.left = `${xEnd}px`;
    el.style.top = `${yEnd}px`;

    // Re-clone the element, to reset the animation
    el.parentNode.replaceChild(el.cloneNode(true), el);
}

let x = 0;
let y = 0;

function randomMove()
{
    let newX = Math.floor(Math.random() * 800);
    let newY = Math.floor(Math.random() * 600);
    animatedMove('mymovingdiv', x, y, newX, newY, 1);
    x = newX;
    y = newY;
}

setInterval(randomMove, 1000);
</script>
</body>
</html>

关于javascript - 在javascript中更改CSS动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29376053/

27 4 0
文章推荐： swift - 如何使 Collection View 中的一个单元格的高度与屏幕减去导航高度相同。酒吧？
文章推荐： css - 一个 div 在另外两个上，但只在其中一个上运行
文章推荐： swift - Cocoapods ReactiveKit swift编译器错误
文章推荐： json - 从具有未知结构 SWIFT 的 JSON 中查找值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com