어떻게하면 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> 

자바 스크립트

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 단계로 아이 같은 요소를 추가 할 수 있습니다

1. 0
에 요소의 불투명도를 설정 부모
2. 에 추가
3. 은 0 ~ 1 (페이드 인 이펙트) 코드에서

, somethi에서 불투명도의 애니메이션을 그런 NG :

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

당신이 jQuery를 코드를 사용하는 경우 :이 코드는 IE 7 또는 8에서 작업을해야하는 경우

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 호환성에 대해 걱정할 필요가 없습니다.

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(); 
    }); 
});