用javascript转换，移动对象 [英] Transition with javascript, moving object

问题描述

我正在尝试改变高度，但使用JavaScript。
正如我所看到的，它不起作用，所以我需要你的帮助。
以下是代码和波纹管，我会向您解释我的想法。

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

< input type =button id =buttononclick =myFunction（）value =Show>< script>函数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';

所以这里的想法是：'' height'包含DIV的高度，我使用循环来增加'top'的值，以便通过窗口移动它，如过渡。 'i'是变量，其中包含'top'的当前值，而i小于height时它会增加并保存当前值在上面。 / div>在样式 #myDiv 的高度使用属性或 css ，并将 display 设置为 block 。使用 window.getComputedStyle（）来获取 height 作为数字。



您可以使用 Element.animate（）函数.org / en-US / docs / Web / API / Web_Animations_APIrel =nofollow noreferrer> Web Animations API 可以从<$动画元素 top 将元素 .height 的值设置为c $ c> 0 ，其中 fill 设置为转发。

$ b

#button {display：inline-block;位置：相对; top：0; left：0;}＃myDIV {position：relative;显示：块; < script>

I am trying to make transition of the height, but with JavaScript. As I can see, it doesn't work, so I'll need your help. Here's the code and bellow I'll explain you my idea.

#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>

So here's the idea: 'height' contains the height of the DIV, I use the loop to increase the value of 'top' in order to move it trough the window, like transition. 'i' is variable which contains the current value of 'top' and while i is smaller than height it increases and saves the current value in top.

解决方案

Set height of #myDiv at style attribute or css, with display set to block. Use window.getComputedStyle() to get the height as a number.

You can use Element.animate() function of Web Animations API to animate the element top from 0 to value set at element .height, with fill set to "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转换，移动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！