Fatal编程技术网
  • javascript/
  • Javascript 动画功能不正确，动画不可重复

Javascript 动画功能不正确，动画不可重复

javascript html css animation

Javascript 动画功能不正确，动画不可重复,javascript,html,css,animation,repeat,Javascript,Html,Css,Animation,Repeat,我的练习网站有几个新问题。第一个问题是其中一个已设置动画的页面转换未设置动画。单击历史页面对象上方的“主页”按钮后，历史页面将简单地恢复到屏幕外的原始位置，而不是像应该的那样向后滑动。我不知道是什么原因造成的。动画功能不正确的是“.animate2”/“SlideOut” 另一个问题是，动画一旦运行，似乎就无法再次触发。有人知道解决这个问题的好方法吗（最好不用JQuery） 以下是网页HTML： <body> <div id="Wrapper"> <

我的练习网站有几个新问题。第一个问题是其中一个已设置动画的页面转换未设置动画。单击历史页面对象上方的“主页”按钮后，历史页面将简单地恢复到屏幕外的原始位置，而不是像应该的那样向后滑动。我不知道是什么原因造成的。动画功能不正确的是“.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>
主页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');
                                         });
编辑：我解决了一半的问题-动画现在可以重复。我所要做的就是在每个函数中添加一行，告诉它删除在按下按钮之前已经完成的动画类。我已经更新了这里显示的代码的javascript部分，以反映这一变化

不幸的是，“动画2”仍然不能正确播放。对象仍在捕捉到位，而不是滑入。我会更新这篇文章，如果我设法解决它

编辑2：我让动画正常工作。事实证明，我只是让对象捕捉到错误的位置来开始动画。我调整了起始位置，现在它工作得很好。我更新了上面显示的CSS的关键帧部分以反映这一变化。

您是否有JSFIDLE或工作代码示例，我们可以看看？@thewolff。图像不会显示，但相关按钮位于主页的左下角和历史页面的左上角。我们不会在标题中显示“已解决”。如果您回答了自己的问题，您可以将其张贴在下面并接受，或者删除该问题。谢谢 
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');
                                         });