Как включить CSS-переходы на динамически создаваемых объектах - PullRequest
Новая
       35

Как включить CSS-переходы на динамически создаваемых объектах

0 голосов
/ 29 января 2019

Я динамически создаю div, высота которых равна 0%, что указано в правиле 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% при изменении выпадающего меню.

1 Ответ

0 голосов
/ 29 января 2019

Все «результаты» процесса рендеринга в браузере происходят одновременно - все сразу.Вы должны сказать браузеру подождать до следующего цикла рендеринга, прежде чем «увеличивать» элемент. 

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

Это будет выполнено.

...