Добавить анимацию при добавлении новой строки в форму

Question

Im используя javascript, чтобы добавить новую строку в мою форму для шагов, и я хотел бы использовать интерфейс движений оснований, чтобы анимировать новую строку, поскольку она добавлена, но я не могу ее получить Работа.

Вот функция, которая добавляет новую строку:

add_fields = function(link, association, content) { 
    var new_id, regexp; 
    new_id = (new Date).getTime(); 
    regexp = new RegExp('new_' + association, 'g'); 
    $(link).closest('div.row').prev().append(content.replace(regexp, new_id)); 
}; 

И, Что время добавить:

<div class="row"> 
    <div class="small-11 columns"> 
     <%= f.text_area :step %> 
    </div> 
    <div class="small-1 columns"> 
     <%= f.hidden_field :_destroy %> 
     <%= link_to "Remove", '#', :onclick => h("remove_fields(this)"), class: "btn", title: "Remove Step", remote: true %> 
    </div> 
</div> 

Edit: я в конечном итоге выяснить это из учредительных документов и играть вокруг с тем, как я выбрал элемент. У меня был выбран неправильный элемент и на нем не было правильных тегов, чтобы он был анимированным. Как только я понял, как получить новый ДИВ выбран все было легко с

Foundation.motion.animateIn() 

Answer 1

вы могли бы что-то вроде этого: https://jsfiddle.net/u44fLhxr/

Сначала с помощью CSS скрыть свою строку с непрозрачностью 0, добавить эффект перехода и создавать, подождите немного и добавьте класс, который задает непрозрачность 1 (и другой эффект css, если вы хотите).

HTML:

<button id="addRow">Add Row</button> 
<div class="container"></div> 

JS на кнопку мыши добавить строку и 50мс позже добавить видимый класс запуска анимации перехода:

var container = document.querySelector('.container'); 
var btn = document.getElementById('addRow'); 

btn.addEventListener('click', addRow); 

function addRow() { 

    // add row 
    var row = document.createElement('div'); 
    row.className = 'row'; 
    container.appendChild(row); 

    // animation 
    setTimeout(function() { 
     row.classList.add('visible'); 
    }, 50) 
} 

CSS:

.row { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    display: inline-block; 
    margin: 5px; 
    opacity: 0; 
    transform: scale(0.6, 0.6) translate(50px, 0); 
    transition: opacity .2s ease-out, transform .2s ease-out; 
} 

.row.visible { 
    opacity: 1; 
    transform: scale(1, 1) translate(0, 0); 
}