Transition With Javascript, Moving Object

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. So

Solution 1:

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"];

  functiontoggleAnimation(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`
      }
  }

  functionmyFunction() {
    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><spanid="myDIV"><p>Pressure:</p><p>Air gases:</p></span><inputtype="button"id="button"onclick="myFunction()"value="Show">