javascript - 在 JS 中动画化 insertAdjacentHTML

Question

是否可以在 Jquery 中为 insertAdjacentHTML 设置动画？现在它只是将其直接粘贴到指定的 div 中。

当前函数

$(".select-category").click(function(){
  addSelect("<%= j render "userselections/select-companies", companies: @companies %>");
});

function addSelect(selectHTML) {
  var category_selection = document.getElementById('product-list');
  category_selection.innerHTML = "";
  category_selection.insertAdjacentHTML('beforeend', selectHTML);
}

Answer 1

将 html 元素插入 dom 树后，您必须检索相关元素的宽度或高度以触发 DOM 重排。

function addSelect(selectHTML) {
  var category_selection = document.getElementById('product-list');
  category_selection.innerHTML = "";
  category_selection.insertAdjacentHTML('beforeend', selectHTML);
  // this code is for triggering DOM reflows
  category_selection.clientHeight;
  // Implement transitions here
}