CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
DRing
DRing

Reputation: 7039

Add animation when adding new row in form

Im using javascript to add a new row to my form for steps and I would like to use foundations motion UI to animate the new row as its added in but I cant seem to get it to work.

Here's the function that adds the new row:

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

And whats being add:

<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: I ended up figuring this out from the foundation documents and playing around with how i selected the elem. I had the wrong element selected and didnt have the right tags on it so it was animating. Once I figured out how to get the new div selected everything was easy with 

Foundation.motion.animateIn()

Upvotes: 0

Views: 1555

Answers (1)

Gatsbill
Gatsbill

Reputation: 1790

you could something like this : https://jsfiddle.net/u44fLhxr/

First with css hide your row with opacity 0, add transition effect and on create, wait a little and add a class that set opacity to 1 (and other css effect if you want).

html: 

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

js on button click add row and 50ms later add visible class triggering the transition animation: 

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

Upvotes: 1

Related Questions