动画附加到列表

Question

如何制作从一个列表到另一个列表的动画，最好使用 Jquery 动画？鉴于以下代码，我知道我应该能够使用 animate 将列表项移动到它将在接收列表中占据的位置......但是我如何获取坐标，并将它们转换为 css 值？

$('#list1').on('click', 'li', function() {
 // $(this).animate( ??? )
 $(this).appendTo($('#list2'));
})

$('#list2').on('click', 'li', function() {
 // $(this).animate( ??? )
 $(this).appendTo($('#list1'));
})

ul {
  background-color: grey;
  color: black;
  padding: 10px;
  margin: 50px;
  width: 20%;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<ul id="list2">
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

jsfiddle

Answer 1

今天是星期六晚上（当地时间），我想帮助别人，我认真对待你的问题，并在下面的每个步骤中提供了示例和解释。

这个例子中最重要的是使用绝对定位的列表元素（在这个例子中#animatedList），这样这个动画列表元素就不会与其他元素交互。此外，要获得正确的坐标，您还必须考虑 margins/paddings 原始元素。

您必须单击按钮 "Run code snippet" 才能执行此示例。希望这对你有帮助：

$('#list1').on('click', 'li', function() {
  var startElement = $(this);
  var endElement = $('#list2');
  startAnimation(startElement, endElement);
})

$('#list2').on('click', 'li', function() {
  var startElement = $(this);
  var endElement = $('#list1');
  startAnimation(startElement, endElement);
})

function startAnimation(startElement, endElement){
  var clickedListElement = startElement;
  // copy content of original element into animated list-element 
  var contentCopy = clickedListElement.text();
  var startCoords = getCoordsOfElement(clickedListElement);
  // if there are no li-elements anymore take the position of the whole list instead otherwise take last list-element
  var endCoords;
  if(endElement.find('li:last').length)endCoords = getCoordsOfElement(endElement.find('li:last'));
  else endCoords = getCoordsOfElement(endElement);
  // hide original element because the animated list-element will be shown 
  clickedListElement.css('visibility','hidden');
  showAnimation(contentCopy,startCoords,endCoords,function(){
   // the last step: copy the original element to it's destination and show it again because the animation is over
   clickedListElement.appendTo(endElement).css('visibility','visible');
  });
}

function getCoordsOfElement(element){
  var endCoords = element.offset();
  // because the margin and paddings of these lists distorts the calculated position you have to take them into consideration
  // and therefore we subtract them for top and left
  var marginOffsetTop = 50;
  endCoords.top -= marginOffsetTop;
  var marginOffsetLeft = 50;
  endCoords.left -= marginOffsetLeft;
  // the same happens with padding 
  var paddingOffsetTop = 10;
  endCoords.top -= paddingOffsetTop;
  var paddingOffsetLeft = 10;
  endCoords.left -= paddingOffsetLeft;
  return endCoords;
}

function showAnimation(contentCopy,startCoord,endCoord,callback){
 var list = $('#animatedList');
 // copy text of originel element into animated-list-element
 list.find('li').text(contentCopy);
 // set animated-list/element at the same position as the original clicked element
 list.css('top',startCoord.top+'px').css('left',startCoord.left+'px').show();
 list.animate({
   top: endCoord.top+'px',
   left: endCoord.left+'px'
 }, 1000, function(){
    // animation is finished here
    list.hide();
    callback();
 });
}

ul {
  background-color: grey;
  color: black;
  padding: 10px;
  margin: 50px;
  width: 20%;
  display: inline-block;
}

#animatedList{
  display:none;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

<ul id="list2">
<li>four</li>
<li>five</li>
<li>six</li>
</ul>

<ul id="animatedList">
<li></li>
</ul>

动画附加到列表

Animate append to list

javascript

css

jquery

animation

jquery-animate