javascript - eventListeners 的动画处理问题
问题描述
我有这个问题，尽管由于某种原因它在下面的代码段中似乎运行良好。
我希望 START 在单击它时执行与 EXIT 相同的动画，但是会发生什么：
如果鼠标在它上面它就像它做了一半的动画然后停止。
如果鼠标在点击后离开，它就会停止。
我在 Chrome 中运行代码并尝试了 Mozilla，结果相同。我真的很惊讶为什么它在片段中运行良好。我尝试了很多方法，例如删除侦听器、简化动画等，但没有任何效果。
function TogleAnimationStart(){
document.getElementById('Start').style.animation = "WhenHover 0.4s infinite, Lighting 0s 0s infinite, MenuMove 0s 0s infinite"
}
function TogleAnimationOptions(){
document.getElementById('Options').style.animation = "WhenHover 0.4s infinite, Lighting 0s 0s infinite, MenuMove 0s 0s infinite "
}
function TogleAnimationExit(){
document.getElementById('Exit').style.animation = "WhenHover 0.4s infinite, Lighting 0s 0s infinite, MenuMove 0s 0s infinite"
}
function TogleIdleMenu(id){
document.getElementById(id).style.animation = "Lighting 4s linear infinite, MenuMove 2.5s infinite"
}
function Intro(){
document.getElementById('Start').style.animation = "Lighting 4s linear infinite, MenuMove 2.5s infinite"
document.getElementById('Options').style.animation = "Lighting 5s linear infinite, MenuMove 2.5s infinite"
document.getElementById('Exit').style.animation = "Lighting 4s linear infinite, MenuMove 2.5s infinite"
document.getElementById('Start').addEventListener("click", StartGame)
document.getElementById('Start').addEventListener("mouseover", TogleAnimationStart)
document.getElementById('Options').addEventListener("mouseover", TogleAnimationOptions)
document.getElementById('Exit').addEventListener("mouseover", TogleAnimationExit)
document.getElementById('Start').addEventListener("mouseout", function(){TogleIdleMenu('Start')})
document.getElementById('Options').addEventListener("mouseout", function(){TogleIdleMenu('Options')})
document.getElementById('Exit').addEventListener("mouseout", function(){TogleIdleMenu('Exit')})
}
function StartGame(){
document.getElementById('Start').style.animation = "Bye 1s 0.2s 1"
document.getElementById('Options').style.animation = "ByeOptions 1s 0.2s 1"
document.getElementById('Exit').style.animation = "Bye 1s 0.2s 1"
}
window.addEventListener('load',function(){
document.getElementById("GameFrame").addEventListener("click", Intro, { once: true })
})body{
overflow: hidden;
display: flex;
justify-content: center;
background: #031321;
}
#Start,#Options,#Exit{
background-color: black;
text-align: center;
color: #ffd70080;
letter-spacing: 3px;
font-size: 40px;
display: block;
margin: 20px;
height: 50px;
width: 300px;
border: 4px double #8B008B;
border-radius: 50px;
position: relative;
left: 250px;
top: 350px;
}
#GameFrame{
background: black;
max-width: 100%;
height: 650px;
width: 850px;
position: relative;
}
@keyframes WhenHover{
0%{
cursor: pointer;
font-size: 43px;
text-shadow: 0px 0px 7px #ffd700, 0 0 60px #ffd700, 0 0 160px #ffd700;
color: #ffd700;
filter: brightness(85%);
background: #8B008B;
box-shadow: 0 0 300px #8B008B, 0 0 600px #8B008B, 0 0 160px #8B008B;
}
25%{
top: 354px;
cursor: pointer;
font-size: 43px;
text-shadow: 0px 0px 7px #ffd700, 0 0 60px #ffd700, 0 0 160px #ffd700;
color: #ffd700;
filter: brightness(85%);
background: #8B008B;
box-shadow: 0 0 300px #8B008B, 0 0 600px #8B008B, 0 0 160px #8B008B;
}
50%{
top: 358px;
cursor: pointer;
font-size: 43px;
text-shadow: 0px 0px 7px #ffd700, 0 0 60px #ffd700, 0 0 160px #ffd700;
color: #ffd700;
filter: brightness(85%);
background: #8B008B;
box-shadow: 0 0 300px #8B008B, 0 0 600px #8B008B, 0 0 160px #8B008B;
}
75%{
top: 354px;
cursor: pointer;
font-size: 43px;
text-shadow: 0px 0px 7px #ffd700, 0 0 60px #ffd700, 0 0 160px #ffd700;
color: #ffd700;
filter: brightness(85%);
background: #8B008B;
box-shadow: 0 0 300px #8B008B, 0 0 600px #8B008B, 0 0 160px #8B008B;
}
100%{
top: 350px;
cursor: pointer;
font-size: 43px;
text-shadow: 0px 0px 7px #ffd700, 0 0 60px #ffd700, 0 0 160px #ffd700;
color: #ffd700;
filter: brightness(85%);
background: #8B008B;
box-shadow: 0 0 300px #8B008B, 0 0 600px #8B008B, 0 0 160px #8B008B;
}
}
@keyframes Lighting{
0%{text-shadow: 0px 0px 7px #ffd70080, 0 0 18px #ffd70080, 0 0 46px #ffd70080; box-shadow: 0 0 21px #8B008B;}
10%{top: 349px; text-shadow: 0px 0px 8px #ffd70080, 0 0 19px #ffd70080, 0 0 45px #ffd70080; box-shadow: 0 0 20px #8B008B;}
20%{top: 351px; text-shadow: 0px 0px 9px #ffd70080, 0 0 20px #ffd70080, 0 0 43px #ffd70080; box-shadow: 0 0 19px #8B008B;}
30%{top: 349px; text-shadow: 0px 0px 10px #ffd70080, 0 0 21px #ffd70080, 0 0 42px #ffd70080; box-shadow: 0 0 18px #8B008B;}
40%{top: 351px; text-shadow: 0px 0px 11px #ffd70080, 0 0 22px #ffd70080, 0 0 41px #ffd70080; box-shadow: 0 0 17px #8B008B;}
50%{top: 349px; text-shadow: 0px 0px 12px #ffd70080, 0 0 23px #ffd70080, 0 0 40px #ffd70080; box-shadow: 0 0 16px #8B008B;}
60%{top: 351px; text-shadow: 0px 0px 11px #ffd70080, 0 0 22px #ffd70080, 0 0 41px #ffd70080; box-shadow: 0 0 15px #8B008B;}
70%{top: 349px; text-shadow: 0px 0px 9px #ffd70080, 0 0 21px #ffd70080, 0 0 42px #ffd70080; box-shadow: 0 0 16px #8B008B;}
80%{top: 351px; text-shadow: 0px 0px 8px #ffd70080, 0 0 20px #ffd70080, 0 0 43px #ffd70080; box-shadow: 0 0 17px #8B008B;}
90%{top: 349px; text-shadow: 0px 0px 7px #ffd70080, 0 0 19px #ffd70080, 0 0 44px #ffd70080; box-shadow: 0 0 18px #8B008B;}
100%{top: 351px; text-shadow: 0px 0px 6px #ffd70080, 0 0 18px #ffd70080, 0 0 45px #ffd70080; box-shadow: 0 0 19px #8B008B;}
}
@keyframes MenuMove{
0%{top: 451;}
10%{top: 349px;}
20%{top: 351px;}
30%{top: 349px;}
40%{top: 351px;}
50%{top: 349px;}
60%{top: 351px;}
70%{top: 349px;}
80%{top: 351px;}
90%{top: 349px;}
100%{top: 351px;}
}
@keyframes Bye{
0% {
background-color: black;
left: 250px;
color:#333300; text-shadow: none;
border-color: #8B008B;
}
30% {
background-color: black;
left: 230px; top: 350px;
color:#ffd700; text-shadow: 0px 0px 10px #ffd700, 0 0 10px #ffd700, 0 0 100px #ffd700; font-size: 43px;
border-color: #8B008B; box-shadow: 0 0 30px #8B008B;
}
45% {
background-color: black;
left: 280px; top: 350px;
color:#333300; text-shadow: none;
border-color: #8B008B80; box-shadow: none;
}
100% {
background-color: black;
left: -700px; top: 350px;
color:#333300; text-shadow: none;
border-color: #8B008B80; box-shadow: none;
}
}
@keyframes ByeOptions{
0%{
background-color: black;
left: 250px;
color:#333300; text-shadow: none;
border-color: #8B008B;
}
30%{
background-color: black;
left: 270px;
color:#ffd700; text-shadow: 0px 0px 10px #ffd700, 0 0 10px #ffd700, 0 0 100px #ffd700; font-size: 43px;
border-color: #8B008B; box-shadow: 0 0 10px #8B008B80;
}
35%{
background-color: black;
left: 220px;
color:#333300; text-shadow: none;
border-color: #8B008B80; box-shadow: none;
}
100%{
background-color: black;
left: 1400px;
color:#333300; text-shadow: none;
border-color: #8B008B80; box-shadow: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Pac-Man</title>
<link rel="stylesheet" href="style.css"></link>
<script src="app.js"></script>
</head>
<body>
<div id = "GameFrame" >
<a id= "Start">
START
</a>
<a id= "Options">
OPTIONS
</a>
<a id= "Exit">
EXIT
</a>
</div>
</body>
</html>解决方案
推荐阅读
- python - 本地 pypi 服务器为 windows、mac 和 linux 用户提供服务
- reactjs - 如何在酶/反应中获取子组件的文本（）
- python - 在 Swagger Python 中使用嵌套或列表字段的问题
- java - 在说明符之间使用空格
- python-3.x - 如果forced_glossary 位于/tmp/ 文件夹中，Watson LT SDK create_model() 将失败
- r - R 背包功能
- dart - 在卡片中任意定位小部件（基于相对于父级的 xy 坐标）
- sql - API 到 SQL Server 2017
- fish - Fish shell：如何在提示中禁用“git status”？
- javascript - 当元素具有样式时忽略媒体查询