如何在动态创建的对象上启用 css 转换

Question

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

我知道我需要在 DOM 中编写代码 'live'，所以我尝试在两个不同的函数中分离高度样式的附加和应用。

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

浏览器渲染过程的所有 'results' 都同时发生 - 全部同时进行。您必须告诉浏览器在 'growing' 元素之前等到下一个渲染周期。

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

会完成的。

如何在动态创建的对象上启用 css 转换

How to enable css transitions on dynamically created objects

javascript

transition

addeventlistener

css-transitions