使用 javascript 转换，移动对象

Question

我正在尝试转换高度，但使用 JavaScript。 如我所见，它不起作用，所以我需要你的帮助。 这是代码，下面我将向您解释我的想法。

#button {
    display: inline-block;
    top = 0;
    left = 0;
}

<input type="button" id="button" onclick="myFunction()" value="Show">

<script>
    function myFunction(){
        var x = document.getElementById('button');
        var height = document.getElementById('myDIV').clientHeight;
        
        for(i = x.style.top; i <= height; i++){
            x.style.top = i + 'px';
        }
    }
</script>

所以这里的想法是：'height' 包含 DIV 的高度，我使用循环来增加 'top' 的值，以便在窗口中移动它，就像过渡一样。 'i' 是包含 'top' 的当前值的变量，当 i 小于高度时，它会增加并将当前值保存在顶部。

Answer 1

将#myDiv 的height 设置为style 属性或css，将display 设置为block。使用window.getComputedStyle() 获取height 作为数字。

您可以使用Web Animations API 的Element.animate() 函数将元素top 从0 设置为设置在元素.height 的值，同时将fill 设置为"forwards"。

#button {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
}

#myDIV {
  position: relative;
  display: block;
  height: 100px;
}

<script>
  var settings = ["0px"];

  function toggleAnimation(el, from, to) {
    el.animate([{
        top: from
      }, {
        top: to
      }], {
        duration: 2500,
        iterations: 1,
        fill: "forwards"
      })
      .onfinish = function() {
        settings.reverse(); // reverse `from`, `to` stored at `settings`
      }
  }

  function myFunction() {
    var x = document.getElementById("button");
    var height = window.getComputedStyle(document.getElementById("myDIV")).height;
    if (!settings[1]) settings[1] = height;
    toggleAnimation(x, settings[0], settings[1]);
  }
</script>

<span id="myDIV">
        <p>Pressure:</p>
        <p>Air gases:</p>
    </span>
<input type="button" id="button" onclick="myFunction()" value="Show">