title: Triggering CSS transition for a height change by javascript
body: <p>I am trying to trigger a transition effect for an element by changing height with javascript. I've searched for an answer, but all I could find was using the css animation instead and my code is not compatible with that idea. Here is my code ;</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function printVolumeLevel(level) {
    var volumeDiv = document.getElementById('volume_level');
    volumeDiv.innerHTML = "";
    var iconVolume = document.getElementById('icon_volume');
    iconVolume.innerHTML = "";
  
    if (OutputSettings.isAudioMuted() === false) {
      iconVolume.innerHTML += "&lt;div  class=\"volumeOn\" /&gt; \n";
  
      volumeDiv.innerHTML += "&lt;div  class=\"volumeLevelUnfocus\" /&gt; \n";
      volumeDiv.innerHTML += "&lt;div  class=\"volumeLevelFocus\" /&gt; \n";
  
      var volumeHeight = level * 40;
  
      document.getElementsByClassName("volumeLevelFocus")[0].style.height = volumeHeight + "px";
      document.getElementsByClassName("volumeLevelUnfocus")[0].style.height = (800 - volumeHeight) + "px";
  
    } else {
      iconVolume.innerHTML += "&lt;div  class=\"volumeOff\" /&gt; \n";
      document.getElementsByClassName("volumeLevelUnfocus")[0].style.setProperty("height", "800px");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.volumeLevelFocus {
    background: #da1c5c;
    width: 40px;
    -webkit-transition: height 0.2s;
    transition: height 0.2s;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
    height: 400px;
  }
  
  .volumeLevelUnfocus {
    background: #111a21;
    width: 40px;
    -webkit-transition: height 0.2s;
    transition: height 0.2s;
    height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="volume_level"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>