更改javascript中的css动画

Changing css animation in javascript

本文关键字：动画 css 中的 javascript 更改      更新时间：2023-09-26

我的html中有一个闪烁的红色框，它使用css动画。我想把它从闪烁的红色和白色变成绿色和白色。我知道这可以通过使用getElementbyId在id元素上完成，但如何访问css中的绿色aminated框。红色框看起来像这样：

@-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;

我想我必须将属性-webkit-animation-name:从javascript中更改才能做到这一点，但我不知道如何处理它来更改它。还是我最好创建一个重复的#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>

最简单的方法是在CSS中创建两个类，然后在两者之间切换。

所以类似于：

.connection {
  animation: 'Connection' 5s ease infinite
}

.no-connection {
  animation 'noConnection' 5s ease infinite
}

然后使用Javascript在两个之间切换

function toggleConnectionStatus(){
 var element = document.getElementById('animate');
 if(/* connection is active */) element.className = 'connection';
 else element.className = 'no-connection'
}
相关文章：