我的练习网站有几个新问题。首先是其中一个动画页面过渡不是动画。单击“历史记录页面”对象上方的“主页”按钮后，“历史记录页面”只会在屏幕上快速回到原始位置，而不是像应该的那样向后滑动。我无法弄清楚造成这种情况的原因。动画功能不正确的是“.animate2”/“SlideOut”。
另一个问题是，一旦动画运行，它似乎无法再次触发。有没有人知道解决这个问题的好方法（最好没有JQuery）？
这是主页HTML：
<body>
<div id="Wrapper">
<div id="Home">
<div class="Box">
<div id="PledisHover">
<img class="Pledis" src="Pledis.png">
<img class="PledisHov" src="PledisHov.png">
</div>
<img class="SVT" src="SayTheName.png">
<img class="Logo" src="Logo.png">
<div id="HistHover" onClick="">
<img src="HistButton.png"
onmouseover="this.src='HistButtonHover5.png'"
onmouseout="this.src='HistButton.png'">
</div>
<div id="MembHover" onClick="">
<img src="MemButton.png"
onmouseover="this.src='MemButtonHov.png'"
onmouseout="this.src='MemButton.png'">
</div>
<div id="MedHover" onClick="">
<img src="MedButton.png"
onmouseover="this.src='MedButtonHov.png'"
onmouseout="this.src='MedButton.png'">
</div>
</div>
<div id="Hist">
<img id="HomeButton" src="Home.png" onmouseover="this.src='HomeHov.png'" onmouseout="this.src='Home.png'">
<object id="Page" name="Page" type="text/html/css" data="SVTHist.html">
</object>
</div>
<div id="Memb">
<object id="Page" name="Page" type="text/html/css" data="SVTMemb.html"></object>
</div>
<div id="Med">
<object id="Page" name="Page" type="text/html/css" data="SVTMed.html"></object>
</div>
</div>
</body>
主页CSS：
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#Wrapper {
height: 702px;
width: 1364px;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
position: absolute;
overflow: hidden;
}
#Hist, #Memb, #Med {
height: 702px;
width: 1364px;
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: 1364px;
}
#Home {
height: 702px;
width: 1364px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background: linear-gradient(#F293BF 50%, #EBEFF8 50%);
}
.Box {
background-repeat: no-repeat;
background-attatchment: fixed;
background: linear-gradient(#94DBF7, #D2EAF7);
height: 646px;
width: 1202px;
position: relative;
left: 5.5%;
top: 25px;
}
.Pledis, .PledisHov, .SVT, .Logo, #HistHover, #MembHover, #MedHover {
position: absolute;
}
#HistHover, #MembHover {
top: 543px;
}
#HistHover:hover {
cursor: pointer;
}
.Pledis {
top: 15%;
left: 15%;
}
.PledisHov {
top: 78px;
left: 175px;
transform: rotate(-15deg);
}
.PledisHov, #PledisHover:hover .Pledis {
display: none;
}
.Pledis, #PledisHover:hover .PledisHov {
display: block;
}
.SVT {
top: 10%;
left: 20%;
}
.Logo {
top:48%;
left: 37%;
}
#HistHover {
left: 25%;
}
#MembHover {
left: 42%;
}
#MedHover {
top: 553px;
left: 59%;
}
#Page {
height: 702px;
width: 1364px;
}
.animate {
-webkit-animation-name: Slide;
-webkit-animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
@-webkit-keyframes Slide {
from {transform: translateX(0px)}
to {transform: translateX(-1364px)}
}
@keyframes Slide {
from {transform: translateX(0px)}
to {transform: translateX(-1364px)}
}
.animate2 {
-webkit-animation-name: SlideOut;
-webkit-animation-duration: 1.7s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
@-webkit-keyframes SlideOut {
from {transform: translateX(-1364px)}
to {transform: translateX(1364px)}
}
@keyframes SlideOut {
from {transform: translateX(-1364px)}
to {transform: translateX(1364px)}
}
#HomeButton {
position: absolute;
top: 2px;
left: 9px;
}
主页Javascript：
document.getElementById('HistHover').addEventListener('click', function() {
document.getElementById('Hist').classList.remove('animate2');
document.getElementById('Hist').classList.add('animate');
});
document.getElementById('HomeButton').addEventListener('click', function() {
document.getElementById('Hist').classList.remove('animate');
document.getElementById('Hist').classList.add('animate2');
});
document.getElementById('MembHover').addEventListener('click', function() {
document.getElementById('Memb').classList.remove('animate2');
document.getElementById('Memb').classList.add('animate');
});
document.getElementById('HomeButton2').addEventListener('click', function() {
document.getElementById('Memb').classList.remove('animate');
document.getElementById('Memb').classList.add('animate2');
});
document.getElementById('MedHover').addEventListener('click', function() {
document.getElementById('Med').classList.remove('animate2');
document.getElementById('Med').classList.add('animate');
});
document.getElementById('HomeButton3').addEventListener('click', function() {
document.getElementById('Med').classList.remove('animate');
document.getElementById('Med').classList.add('animate2');
});
不幸的是，“animation2”仍然无法正常播放。该对象仍在捕捉到位，而不是滑入。如果我设法解决它，我会更新这篇文章。
编辑2：我让动画正常工作。事实证明，我只是将对象捕捉到错误的位置以启动动画。我调整了起始位置，现在它完美无缺。我更新了上面显示的CSS的关键帧部分以反映这一变化。