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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com