为什么动画没有像预期的那样将盒子放在底部答案

【问题标题】：Why Animation is not happening as expected to place box to bottom为什么动画没有像预期的那样将盒子放在底部
【发布时间】：2019-01-18 22:06:37
【问题描述】：

我正在尝试在单击框时执行animation，预期如下

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

注意：如果使用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>

请帮助我提前谢谢！

【问题讨论】：

OP 我没有完全理解这个问题。您是否希望元素在单击时在该网格中向右移动？如果他们在最后一行，您是否希望他们降档？请阐明您的目标，以便我们更好地了解您需要完成的工作。
@keno Clayton，它应该像下面的答案 @Arash Khajelou 一样工作，但没有 setTimeout。 animation 有一些改进

标签： javascript jquery css jquery-animate gsap

【解决方案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>

【讨论】：

但是这个是error prone 而不是scalable solution 你可以在没有setTimeout 的情况下尝试其他的吗
为了防止使用这些超时功能，你必须改变你的定位系统，如果你阻止使用 $.fn.append() 功能，所以不需要这些超时，我的意思是比如绝对定位系统。
仍然没有解决办法，你上面说的你能帮我吗？请
我有另一个解决方案，请检查并反馈给我。
你有没有一个帮助

【解决方案2】：

从你的处理程序中删除这一行

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

【讨论】：

这一行我想根据要求将点击的框移到底部
将其移到添加类的行下方
我试过了，即使它不起作用，请帮助我