为什么动画没有像预期的那样发生在盒子底部

Question

我正试图animation点击预期如下的方框

1. 单击框时,它必须向右移动到300px或最右边,然后它应该到底部.

注意:如果是使用tweenMax (GSAP).然后解决方案最受欢迎.

如图所示:

这是codepen: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

我认为你必须让你的动画播放，请参阅我下面的示例，以及另一个简单的动画。

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

第一个解决方案：

    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>