Question

我使用javascript在我的表单中添加一个新行以获取步骤，我想使用基础动画UI为新行添加动画，但我似乎无法使其工作。

这是添加新行的功能：

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>

编辑：我最终从基础文件中找出了这个，然后玩弄我如何选择元素。我选择了错误的元素，并没有正确的标签，所以它是动画。一旦我弄明白如何选择新的div，

就很容易了

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单击添加行，50ms后添加触发过渡动画的可见类：

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

在表单中添加新行时添加动画

1 个答案: