gpt4 book ai didi

javascript - 你如何在 javascript 中使用 css 关键帧动画

转载 作者:行者123 更新时间:2023-11-28 16:12:19 24 4
gpt4 key购买 nike

有没有办法通过将 animate 属性添加到类来使对象随 CSS 关键帧移动。这样当您单击某个按钮时,该类将附加到该对象,从而创建一个动画?这是 it 的代码

function start(){
document.getElementById('up').onclick = function() {
document.getElementById('red').className = "uppy";
};

document.getElementById('do').onclick = function() {
document.getElementById('red').className = "downy";
};
}

start();
#area {
height: 400px;
width: 400px;
border: 1px solid black;
}
#red {
height: 25px;
width: 25px;
background: red;
}
#btn-row { margin-top: 20px; }

div.downy {
-moz-animation: down 1s;
animation: down 1s;
}

div.uppy {
-moz-animation: up 1s;
animation: up 1s;
}

@keyframes down {
from { top: 0; }
to {top:5 0px; }
}

@-moz-keyframes down {
from { top: 0; }
to { top: 50px; }
}

@keyframes up {
from { bottom: 0; }
to { bottom: 50px; }
}

@-moz-keyframes up {
from { bottom: 0; }
to { bottom: 50px; }
}
<div id="area">
<div id="red"></div>
</div>
<div id="btn-row">
<button id="up">Up</button>
<button id="do">Down</button>
</div>

最佳答案

#red元素处将position设置为relative,将animation-fill-mode设置为forwards .downy

function start() {
document.getElementById('up').onclick = function() {
document.getElementById('red').className = "uppy";
};

document.getElementById('do').onclick = function() {
document.getElementById('red').className = "downy";
};
}

window.onload = start;
#area {
height: 400px;
width: 400px;
border: 1px solid black;
}
#red {
height: 25px;
width: 25px;
background: red;
position:relative;
}
#btn-row {
margin-top: 20px;
}

div.downy {
-moz-animation: down 1s;
animation: down 1s;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
div.uppy {
-moz-animation: up 1s;
animation: up 1s;
}
@keyframes down {
from {
top: 0px;
}
to {
top: 50px;
}
}
@-moz-keyframes down {
from {
top: 0px;
}
to {
top: 50px;
}
}
@keyframes up {
from {
bottom: 0;
}
to {
bottom: 50px;
}
}
@-moz-keyframes up {
from {
bottom: 0;
}
to {
bottom: 50px;
}
}
<div id="area">
<div id="red"></div>

</div>
<div id="btn-row">
<button id="up">Up</button>
<button id="do">Down</button>
</div>

关于javascript - 你如何在 javascript 中使用 css 关键帧动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38164442/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com