javascript - 如何让这些添加的 div 从右边滑入？

Question

这是我制作的一个 super 简单的例子，当你点击 spawn 按钮时创建新的 div。

http://jsfiddle.net/3fLn9v4e/

j查询

$(document).ready(function()
{
    $('.spawndivs').click(function(){
        var my_div = document.createElement('div');
        my_div.className = 'movingdiv';
        document.getElementById('container').appendChild(my_div); 
    });

    $('#reset').click(function(){
        $('#container').empty();
    });
});

如何让这些 div 在创建时从右侧平滑地滑入到它们的静止位置？

Answer 1

您不需要额外的 js 来为您的 div 设置动画。

只需像这样使用关键帧:

$(document).ready(function()
{
    $('.spawndivs').click(function(){
        var my_div = document.createElement('div');
        my_div.className = 'movingdiv';
        document.getElementById('container').appendChild(my_div); 
    });
    
    $('#reset').click(function(){
        $('#container').empty();
    });
});
                      

body{margin:0px;}
.spawndivs
{
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: gray;
    float: left;
    cursor: pointer;
    text-align: center;
    margin-bottom:5px;
}

.container
{
    display: block;
    background-color: blue;
    height: 50px;
    width: 100%;
    margin-bottom:5px;
}

.movingdiv
{
    height: 30px;
    width: 50px;
    background-color: red;
    display: inline-block;
    margin: 10px;
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: -200px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
  }

  to {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
#reset-box{width:100%;clear:left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spawndivs">
    <p>spawn!</p>
</div>

<div id="container"></div>

<div id="reset-box"><button id="reset">Reset</button></div>

jsFiddle 链接:http://jsfiddle.net/AndrewL32/3fLn9v4e/2/