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

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

您可以使用height 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">

用javascript，移动对象过渡

1 个答案: