Javascript动画循环不会停止答案

【问题标题】：Javascript animation loop wont stopJavascript动画循环不会停止
【发布时间】：2019-05-03 13:09:12
【问题描述】：

我是一个初学者，制作一个基本网页，当页面加载时，该网页的文本动画从屏幕顶部到中间。动画本身效果很好，但我无法停止循环。动画本身会停止，但我认为该功能会不断循环。因此，网页上的其他元素（例如链接等）无法正常运行，因为 javascript 在技术上尚未完成。我将如何结束该功能？谢谢。

window.onload = Animation;
function Animation() {

//Get Element, Use Position to detemrine text's position.

var Element = document.getElementById("AnimationText");
var Position = -500;

var ID = setInterval(OnFrame, 20);

function OnFrame() {

    if (Position > 50) {

        clearInterval(ID);

    } else {

        if (Position > -100 && Position <= 0)  {

            //Middle of animation, while text is between -100 and 0 position.
            Position = Position + 3;

        } else if (Position > 0) {

            //End of animation until text position is > 50.
            Position = Position + 2;

        } else {

            //Start of animation until text position is at -100.
            Position = Position + 4;

        }

        Element.style.top = Position + 'px';

    }

}

}

HTML：

<!doctype HTML>

<HTML>

<head>

    <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">

    <link href = "HomepageStyle.css" rel = "stylesheet" type = "text/css">

    <script src = "HomepageAnimation.js"></script>


</head>


<body>

    <div id = "AnimationText">

            <h1>TNT</h1>

    </div>

    <center>

    <a href = "LogIn.html">

        <img src = "_assets/LoginButtonHome.png" style = "margin-right: 40px; margin-top: 400px;">

    </a>

    </center>

</body>

</HTML>

【问题讨论】：

调试时推荐的背景音乐：youtube.com/watch?v=JhqyZeUlE8U

标签： javascript html css animation

【解决方案1】：

我在一个测试 html 文件中试用了您的代码，并添加了控制台日志以查看即使在 clearInterval 之后该函数是否被调用。它没有。你可以自己测试一下。添加两个console.log 语句，一个在if 中，另一个在else 中。

但是，如果它解决了您的问题，您也可以尝试：

if (Position > 50) {
    clearInterval(ID);
    console.log("ended"):
    ID = null;
    return;
}

这也是我的测试 html 元素：

<p id="hello" style="position: absolute;">My first paragraph.</p>

JSFiddle 链接：Test here!

您可以通过以下方式在 Chrome 中查看控制台日志：查看 -> 开发人员 -> JavaScript 控制台

【讨论】：

嘿 - 页面上的另一个链接仍然无法正常工作（我知道它与动画有关，因为如果将其删除，则链接可以正常工作。）如果有任何混淆，函数，该函数始终在该 if 语句上执行，但由于某种原因它没有停止循环。谢谢。编辑：经过更多的实验，循环似乎结束了。然而链接不起作用。老实说，我很难过......
您也可以粘贴到您的示例 html 中
当然！用它编辑了原始帖子。
我刚刚测试了代码。我创建了另一个 jsfiddle。检查。它工作正常。如果在动画期间单击该链接也可以使用。测试这个。 link
嘿-感谢您的帮助。这实际上是一个 CSS 问题。由于一些样式错误，我的 div 重叠。感谢您的努力！

【解决方案2】：

使用 JS 只是添加新类，让 CSS 处理其余的：

HTML：

<div id = "AnimationText" class="init">
  <h1>TNT</h1>
</div>

JS：

document.getElementById("AnimationText").classList.add("middle");

CSS：

#AnimationText {
  transition: all 5s ease;
}
.init {
  margin-top: -200px;
}
.middle {
  position: relative;
  margin-top: 250px;
}

https://jsfiddle.net/haev137u/1/

【讨论】：