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
}

Answer 2

您可以使用.fadeIn，例如：

const newDiv = $('<div>new text</div>')
  .css('display', 'none')
  .fadeIn(1000);
$('#container').append(newDiv);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div>text</div>
</div>

或者您可以想到的任何CSS转换

在JS中使用insertAdjacentHTML进行动画处理

2 个答案: