javascript - 如何在 document.createElement 上添加淡入淡出？

Question

我不确定如何向使用 document.createElement 创建的对象添加淡入淡出效果。我努力了 各种方法都没有结果。

我对 JavaScript 还很陌生，需要一些帮助。有谁有吗 解决这个问题？

提前致谢!

HTML

<fieldset>
<p id="drinkNameHeadline"> Drink Name </p>                          
<label for='drinkName'></label>
<input id="drinkName" type="name" name="drinkName">
<p id="ingredients"> Ingredients </p>

<label for='ingredient'></label>
<input id="textBar" type="name" name="ingredient">

<div id="textBarPosition"></div>
<input id="addBar" type="button" value="Add Ingredient Bar">    

<input class="submit" type="submit" value="Submit">                     
</fieldset> 

JavaScript

function createSector() {
  var input = document.createElement('input'); input.setAttribute("id", 'textBar');
  input.type = 'text';
  input.name = 'name[]';
  return input;
}

var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
  form.appendChild(createSector());
});

Answer 1

您不需要进行一些 JavaScript 计算来创建和淡入元素。 你应该使用CSS。过渡或动画。 此示例中的过渡问题在于，在将元素添加到 DOM 和开始淡入之间需要有一些延迟。 这是一个 CSS 动画示例。

const divElement = document.createElement("div");
divElement.style.animation = "fade-in 3s";
document.body.appendChild(divElement);

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

div {
  width: 150px;
  height: 150px;
  background: black;
}