CODEWITHSUNDEEP
javascripthtmlcssloops
shopskasalata
shopskasalata

Reputation: 3

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.

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

Upvotes: 0

Views: 271

Answers (1)

guest271314
guest271314

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

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

Upvotes: 1

Related Questions