Question

我正在动态创建css规则中指定的高度为0％的div。然后，我有一个选项/选择菜单，其中有一个事件侦听器，用于监听更改。当应用此更改时，我希望它应用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%';
  });

会做到这一点。

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

1 个答案: