为什么动画没有按预期发生以将框放在底部

Question

我正尝试在点击框时执行 animation，预计如下所示

单击框时，它必须向右移动到 300 像素或最右边，然后它应该移到底部。

Note: if it is achieved using tweenMax (GSAP). Then solution is most welcomed.

如图：

这是代码笔：https://codepen.io/anon/pen/ajXqLL

$(function(){
  $('.box').on('click',function(){
      $('#wrapper').append(this);
      $(this).addClass('elementToAnimate');
   });
});

  div.box{
    height: 100px;
    width: 200px;
    background:red;
    display: inline-block;
    text-align:center;
    color:#fff;
    font-size:26px;
    margin: 0px;
    float: left;
  }
  div.box:active{
    background:yellow;
  }
  div.box2{
    background:green;
  }
  div.box3{
    background:orange;
  }


     
@keyframes yourAnimation{
    0%{
        transform: translateX(100px) translateY(20%);
        }
    40%{
        transform: rotate(xx) translateX(120px) translateY(40%);
        }

     60%{
        transform: rotate(xx) translateX(150px) translateY(50%);
        }

      80%{
        transform: rotate(xx) translateX(200px) translateY(90%);
        }

}

.elementToAnimate{
    animation: yourAnimation 3s forwards 0s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <!-- for box 2 -->
     <div class="box box2">7</div>
     <div class="box box2">8</div>
     <div class="box box2">9</div>
     <div class="box box2">10</div>
     <div class="box box2">11</div>
     <div class="box box2">12</div>
     <!-- for box 3-->
     <div class="box box3">13</div>
     <div class="box box3">14</div>
     <div class="box box3">15</div>
     <div class="box box3">16</div>
     <div class="box box3">17</div>
     <div class="box box3">18</div>
 </div>

请帮助我提前谢谢！！

Answer 1

从您的处理程序中删除此行

   $('#wrapper').append(this);

Answer 2

我认为你必须让你的动画播放，看我下面的例子，还有另一个简单的动画。

首先你调用动画，然后必须等待完成动画，最后将你的元素放在最后。

第一个解决方案：

    var initialData = [
   "box1",
   "box1",
   "box1",
   "box1",
   "box1",
   "box1",
   "box2",
   "box2",
   "box2",
   "box2",
   "box2",
   "box2",
   "box3",
   "box3",
   "box3",
   "box3",
   "box3",
   "box3"
  ];

  jQuery(function(){
   var wrapper = jQuery("#wrapper");
   var tableCellTemplate = jQuery("#templates #table-cell").html();
   var movableTemplate = jQuery("#templates #movable").html();
   var bodyEl = jQuery('body');

   var dataCount = initialData.length;
   var maxIndex = dataCount-1;

   jQuery.fn.updateIndex = function(_index){
    if(this.hasClass('movable')){
     var destinationCellEl = jQuery(".box[data-index='"+_index+"']");
     var destinationMovable = jQuery(".movable[data-index='"+_index+"']");

     this.attr('data-index', _index);

     if(destinationMovable !== 0){
      destinationMovable.updateIndex(_index -1);
     }

     if(destinationCellEl.length !== 0){
      this.css({
       top: destinationCellEl.offset().top,
       left: destinationCellEl.offset().left,
       width: destinationCellEl.outerWidth(),
       height: destinationCellEl.outerHeight()
      });
     }
    }
    return false;
   };

   initialData.forEach(function(_item, _index){
    var newCell = jQuery(tableCellTemplate);
    newCell.attr('data-index', (_index));
    wrapper.append(newCell);

    var newMovable = jQuery(movableTemplate);
    newMovable.addClass(_item);
    newMovable.text(_index+1);
    bodyEl.append(newMovable);
    newMovable.updateIndex(_index);
   });

   jQuery('.movable').on('click',function(){
    var movableEl = jQuery(this);
    movableEl.updateIndex(maxIndex);
   });
  });

 div.box{
  height: 100px;
  width: 200px;
  float: left;
  display: inline-block;
  position: relative;
 }

 span.movable  {
  position: absolute;
  top: 0
  left: 0;
  z-index: 99;

  background:red;
  text-align:center;
  color:#fff;
  font-size:26px;
  margin: 0px;
  transition: all 500ms;
 }

 span.movable.box2{
  background:green;
 }
 span.movable.box3{
  background:orange;
 }

 .hidden {
  display: none;
 }

 <div id="wrapper">
 </div>

 <div class="hidden" id="templates">
  <div id="table-cell">
   <div class="box"></div>
  </div>
  <div id="movable">
   <span class="movable" data-index=""></span>
  </div>

 </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

第二种解决方案

 $(function(){
  $('.box:not(.ready-for-move)').on('click',function(){
   var thisEl = jQuery(this);
   var topPos = thisEl.offset().top, leftPos = thisEl.offset().left;
   thisEl.addClass("ready-for-move");
   thisEl.css({
    top: topPos,
    left: leftPos
   });

   var latestItem = jQuery('.box:last-child');
   
   setTimeout(function(){
    thisEl.css({
     top: latestItem.offset().top,
     left: latestItem.offset().left + latestItem.outerWidth()
    });
   }, 50);

   setTimeout(function(){
    $('#wrapper').append(thisEl);
    thisEl.removeClass('ready-for-move');
    thisEl.css({
     top: "auto",
     left: "auto"
    });
   }, 500);

  });
 });

div.box{
 height: 100px;
 width: 200px;
 background:red;
 display: inline-block;
 text-align:center;
 color:#fff;
 font-size:26px;
 margin: 0px;
 float: left;

 transition: all 500ms;
}
div.box:active{
 background:yellow;
}
div.box2{
 background:green;
}
div.box3{
 background:orange;
}

.elementToAnimate{
 animation: yourAnimation 3s forwards 0s linear;
}

.ready-for-move {
 position : absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <!-- for box 2 -->
     <div class="box box2">7</div>
     <div class="box box2">8</div>
     <div class="box box2">9</div>
     <div class="box box2">10</div>
     <div class="box box2">11</div>
     <div class="box box2">12</div>
     <!-- for box 3-->
     <div class="box box3">13</div>
     <div class="box box3">14</div>
     <div class="box box3">15</div>
     <div class="box box3">16</div>
     <div class="box box3">17</div>
     <div class="box box3">18</div>
 </div>

为什么动画没有按预期发生以将框放在底部

Why Animation is not happening as expected to place box to bottom

javascript

css

jquery

jquery-animate

gsap

第一个解决方案：

第二种解决方案