如何在javascript动画结束时隐藏元素

时间:2017-02-26 03:54:31

标签: javascript html animation

我之前已经问过类似的问题,但答案对我没有帮助,因为它们对我和我的简单动画来说太先进了。我正处于javascript的最开始。在我的网站上,我有一个简单的代码,用于将元素从一个posotion移动到另一个posotion。我希望它在到达最终位置时消失,不会消失,只是突然消失。我应该用不透明度改变吗?我怎么写呢?我的代码如下。

function myMove() {
    var elem = document.getElementById("animation");
    var pos = 100 ;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 380) {
            clearInterval(id);


        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';

        }
    }

}

1 个答案:

答案 0 :(得分:0)

要隐藏元素,只需将style.display设置为“none”即可。

例如:

function myMove() {
    var elem = document.getElementById("animation");
    var pos = 100 ;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 380) {
            clearInterval(id);
            // this is the key line
            elem.style.display = 'none';

        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';

        }
    }

就像抬头一样,使用链式setTimeouts比在HTML动画中使用setInterval更好。原因是如果动画(和/或页面上的其他脚本)花费的时间长于浏览器将无响应的时间间隔。使用setTimeouts链,时钟在当前帧结束之前不会开始计时。

例如,你可以这样做:

function myMove() {
    var elem = document.getElementById("animation");
    var pos = 100 ;

    function frame() {
        if (pos == 380) {
            // this is the key line
            elem.style.display = 'none';

        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
            // set a timeout for 5 ms
            setTimeout(myMove, 5);
        }
    }