javascript - 通过javascript触发高度变化的CSS转换

Question

我正在尝试通过使用 javascript 更改高度来触发元素的过渡效果。我已经搜索了一个答案，但我能找到的只是使用 css 动画，而我的代码与那个想法不兼容。这是我的代码；

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 += "<div  class=\"volumeOn\" /> \n";

    volumeDiv.innerHTML += "<div  class=\"volumeLevelUnfocus\" /> \n";
    volumeDiv.innerHTML += "<div  class=\"volumeLevelFocus\" /> \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 += "<div  class=\"volumeOff\" /> \n";
    document.getElementsByClassName("volumeLevelUnfocus")[0].style.setProperty("height", "800px");
  }
}

.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;
}

<div id="volume_level"></div>

Answer 1

您的代码中存在多个问题:

1. 您不能通过 /> 关闭 div , 它必须由 </div> 关闭.

2. 要在 html 中换行，您必须使用 <br>不是 "\n"。

3. 您没有添加 div id="icon_volume" .

4. 如果你想添加一个元素并通过transition改变它的样式，改变必须用另一个进程来完成(在答案中setTimeot)；

你的代码是这样的:

Insert_a_div_with_height(0px);

Make_the_height_of_Inserted_div(800px);

它只添加了一个高度为 800px 的 div，因此没有样式更改，因此也没有过渡。

下面是一个简化的答案:

    .volumeLevelUnfocus {
         background: #111a21;
         width: 40px;
       
        transition-duration: 5s;
        height:400px;
    }

    <div id="volume_level"></div>
    

    <script>
        var volumeDiv = document.getElementById('volume_level');
        volumeDiv.innerHTML = ""; 
       
        volumeDiv.innerHTML += "<div  class=\"volumeLevelUnfocus\" style='height:0px;'></div>";
          
       //another process to change the height of inserted div:
       setTimeout(function(){
            document.getElementsByClassName("volumeLevelUnfocus")[0].style.height = "800px";
       }, 100);

    </script>