javascript - 如何在动态创建的对象上启用 CSS 过渡

Question

我正在动态创建高度为 0% 的 div，该高度在 css 规则中指定。 然后我有一个选项/选择菜单，其中有一个事件监听器监听更改。当应用此更改时，我希望它应用 75% 的高度，效果很好。 不过我还希望它能在 2 秒的时间内过渡到这个新高度。此转换在元素的 css 规则中指定。 但是我无法完成这项工作，它会直接达到 75% 的高度，没有过渡。

我知道我需要使代码在 DOM 中“事件”，因此我尝试将高度样式的附加和应用分离到两个不同的函数中。

function makeBar() {
  container.innerHTML = '';
  let element = document.createElement('div');
  element.classList.add('bar');
  element.setAttribute('class', 'bar');
  element.style.backgroundColor = select.value; 
  container.appendChild(element);
}

select.addEventListener('change', function() {
  makeBar();
})  

select.addEventListener('change', function() {
  let bar = document.getElementsByClassName('bar')[0];
  bar.style.height = '75%';
})  

但是，如果我要替换第二个函数(该函数将高度应用为监听按钮单击的事件监听器)，它就可以正常工作。请参阅https://jsfiddle.net/tdmitchell/3eu48zw7/30/看看我的意思。 虽然我真正想要发生的是当下拉菜单更改时，栏能够从 0% 平滑过渡到新的 75% 高度。

Answer 1

浏览器渲染过程的所有“结果”都是同时发生的 - 全部同时发生。您必须告诉浏览器等到下一个渲染周期后再“增长”元素。

  window.requestAnimationFrame(() => {
    bar.style.height = '75%';
  });

将实现这一目标。