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

要实现淡入效果，您必须以3个步骤添加元素作为子元素：

将元素的不透明度设置为0
将其附加到父级
将不透明度的动画从0调到1（淡入效果）

在你的代码中，类似的东西：

document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = createSelector();
    selector.style.opacity = 0; // be careful this is not working in IE before 9.

   // step 2: append it to its parent.
    form.appendChild(selector);

    // step 3: fade in (we choose to do 20 steps in 1 second to go from 0 to 1. Steps are 50ms each)
    var steps = 0;
    var timer = setInterval(function() {
        steps++;
        selector.style.opacity = 0.05 * steps;
        if(steps >= 20) {
            clearInterval(timer);
            timer = undefined;
        }
    }, 50);
});

如果此代码在IE 7或8中有效，则每次设置不透明度时都必须添加此行：

element.style.filter = "alpha(opacity=0)"; // for step 1
...
element.style.filter = "alpha(opacity=" + (5 * steps) + ")"; // for step 3

如果您使用jQuery，您的代码可以更简单地编写，并且您不必担心不透明度的IE兼容性：

document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = $(createSelector());
    selector.css("opacity", 0);

   // step 2: append it to its parent.
    $(form).append(selector);

    // step 3: fade in
    selector.fadeIn();
});

Answer 2

使用相对较新的浏览器，您可以使用CSS animation的不透明度属性。但jQuery会让你的生活更轻松：

function createSector() {
  return $('<input>')
    .attr({id: 'textBar'})
    .prop({type: 'text', name: 'name[]'})
    .hide()
    .fadeIn();
}

var form = $('#textBarPosition');
$('#addBar').on('click', function(e) {
  form.appendChild(createSector());
});

Answer 3

既然你不介意使用jQuery（你应该添加标签），那么你可以使用它：的 HTML

<fieldset> <h3>Drink Name</h3> <p> <label for='drinkName'></label> <input id="drinkName" type="name" name="drinkName"> </p> <h4>Ingredients</h4> <ol class="ingredients"> <li> <label for="ingredient_0"></label> <input id="ingredient_0" type="name" name="ingredient[]"> </li> </ol> <p> <input id="addBar" type="button" value="Add Ingredient Bar"> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset>

而不是的 SCRIPT

$(document).on('ready', function() { $('#addBar').on('click', function(e) { var ingredients = $('.ingredients'); var totalIngredients = ingredients.find('li').length; var nextIngredient = $('\ <li>\ <label for="ingredient_' + totalIngredients + '"></label>\ <input id="ingredient_' + totalIngredients + '" type="text" name="ingredient[]">\ </li>'); nextIngredient.hide().appendTo( ingredients ).fadeIn(); }); });

Answer 4

您不需要做一些 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;
}

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

4 个答案: