Question

我有一个上下动画的div，效果很好。我得到的问题是，每次页面加载div时都会从页面的最顶部开始，然后跳转到动画开始后它需要的位置。

<body id="body">
  <div id="square"></div>
</body>


#body {
  background: #000;
}

#square {
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  width: 100px;
  height: 100px;
  }

var box = document.getElementById('square');
TOP = (window.innerHeight - box.offsetHeight)/2;
box.style.top = TOP;

var down = setInterval(animateDown, 15);
    var up;

    function animateDown()
    {
        TOP += 3;
        box.style.top = TOP + 'px';
        if(TOP > 900){
            clearInterval(down);
            up = setInterval(animateUp, 15);
        }

    }

    function animateUp()
    {
        TOP -= 3;
        box.style.top = TOP + 'px';
        if(TOP <= (window.innerHeight - box.offsetHeight)/2){
            clearInterval(up);
            down = setInterval(animateDown, 15);
        }

    }

以下是jsfiddle的链接＆gt;＆gt; https://jsfiddle.net/xgilmore/pLbgvc3L/

提前致谢

Answer 1

这是一种解决方法，但您可以将该框作为隐藏启动，然后在开始制作动画后，将其设置为可见。 https://jsfiddle.net/pLbgvc3L/1/

function animateDown()
    {
    box.style.visibility = 'visible';

#square {
  background-color: #fff;
  //margin: 0 auto;
  position: relative;
  width: 100px;
  height: 100px;
  top: 20%;
  visibility: hidden;
  }

哦对不起，我实际上知道发生了什么，只是花了一点时间来弄明白。 top: 20%不执行任何操作，因为百分比仅在父元素（正文）具有显式高度时才起作用。像https://jsfiddle.net/pLbgvc3L/2/

一样

动画载入错误的地方

1 个答案: