为啥动画没有像预期的那样将盒子放在底部

Posted 2023-05-08

技术标签:

【中文标题】为啥动画没有像预期的那样将盒子放在底部【英文标题】：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 有一些改进 【参考方案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);

【讨论】：

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

以上是关于为啥动画没有像预期的那样将盒子放在底部的主要内容，如果未能解决你的问题，请参考以下文章

sh 像老板一样下载Adminer！发现自己经常想要快速将Adminer放在盒子上几分钟，而我调查了一些事情

为啥css要放在头部,js要放在body底部