试图通过Javascript通过按下按钮触发CSS动画
我正在尝试使用Javascript通过按下按钮触发CSS动画。我在这里使用了其他问题和答案，但没有用。我的代码似乎应该可以工作——我遗漏了什么？当我单击按钮时，我指定的div的背景色应该在2秒内变为浅蓝色。我尝试过改变我的身体和测试div的颜色，但没有任何改变。My alert（）触发器，它与我的colorChange在同一个函数中，令人困惑试图通过Javascript通过按下按钮触发CSS动画,javascript,html,css,animation,button,Javascript,Html,Css,Animation,Button,我正在尝试使用Javascript通过按下按钮触发CSS动画。我在这里使用了其他问题和答案，但没有用。我的代码似乎应该可以工作——我遗漏了什么？当我单击按钮时，我指定的div的背景色应该在2秒内变为浅蓝色。我尝试过改变我的身体和测试div的颜色，但没有任何改变。My alert（）触发器，它与我的colorChange在同一个函数中，令人困惑 <!DOCTYPE html> <html lang="en"> <head> <
<!DOCTYPE html>
<html lang="en">
<head>
<title><model-viewer> example</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
function colorChange() {
alert("The button works");
document.getElementByID('test').style.animation="changeColor";
}
</script>
<style>
body {
background-color: darkblue;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.test {
width: 500px;
height: 500px;
background-color: pink;
}
@keyframes changeColor {
to {
background-color: lightblue;
}
}
</style>
</head>
<body id="body">
<div class="test"></div>
<button id="button" onclick="colorChange()">test animation</button>
</body>
</html>
模型查看器示例
函数colorChange（）{
警报（“按钮工作”）；
document.getElementByID（'test'）.style.animation=“changeColor”；
}
身体{
背景色：深蓝色；
-webkit过渡：所有2秒轻松；
-moz转换：所有2秒轻松；
-o-过渡：所有2s容易；
-ms过渡：所有2秒轻松；
过渡：一切都很轻松；
}
.测试{
宽度：500px；
高度：500px；
背景颜色：粉红色；
}
@关键帧改变颜色{
到{
背景颜色：浅蓝色；
}
}
测试动画
其次，test是一个类，而不是一个id。因此，您应该将其更改为id，或者使用函数“document.getElementsByClassName（“test”）或“document.querySelector”（.test”）来访问它。代码中有几个问题 第一个是没有id为“test”的元素。但是，即使我们将其更改为document.querySelector（'.test'）以使用类test获取元素，动画也不会触发 原因是动画必须设置时间，否则假定为0，因此它永远不会运行 以下是style.animation设置中时间设置为10秒的更改代码
函数colorChange（）{
//警报（“按钮工作”）；
document.querySelector（'.test'）.style.animation=“changeColor 10s”；
}正文{
背景色：深蓝色；
-webkit过渡：所有2秒轻松；
-moz转换：所有2秒轻松；
-o-过渡：所有2s容易；
-ms过渡：所有2秒轻松；
过渡：一切都很轻松；
}
.测试{
宽度：500px；
高度：500px；
背景颜色：粉红色；
}
@关键帧改变颜色{
到{
背景颜色：浅蓝色；
}
}
测试动画document.getElementByClassNamedocument.querySelector