Запуск перехода CSS для изменения высоты с помощью javascript

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

2. Для разрыва строки в html вы должны использовать <br> не "\ n".

3. Вы не добавили div id="icon_volume".

4. Если вы хотите добавить элемент и изменить его стиль путем перехода, изменение должно быть выполнено с помощью другого процесса (в ответе setTimeot);

Ваш код некоторые вещи, как это:

Insert_a_div_with_height (0px);

Make_the_height_of_Inserted_div (800px);

Это только добавляет DIV с 800px высотой, так что нет никаких изменений в стиле и, следовательно, нет перехода.

Ниже simlified ответ:

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