如何在appendTo后使一个div飞到另一个div？

Question

如何在appendTo后使一个div飞到另一个div？

3

当点击一些元素时，我希望能将它们移动到其他的 div 中。我找到了 appendTo，但是我不知道如何让这些元素在过渡中飞向其他的 div。

<div id="top">
  <button id="b1">B1</button>
</div>
<br>
<br>
<br>
<br>
<div id="bottom">
  <button id="b2">B2</button>
</div>

<script>
$('#b1').click(function() {
  $('#b1').appendTo($('#bottom'));
})

$('#b2').click(function() {
  $('#b2').appendTo($('#top'));
})
</script>

点击按钮后有简单的方法可以使其“飞”起来吗？目前，我只是让它们淡出并进入新的div。

- Jun Dalisay

在当前坐标位置创建一个“飞行克隆”并将其设置为position:fixed。
将该元素附加为visibility:hidden。
使用CSS transition-timing将克隆从当前位置飞到元素的新位置。
销毁克隆。
将元素的visibility设置为visible。

- Roko C. Buljan

2个回答

-1

我简化了Roko的答案，以查看哪些方法执行什么操作。

function flyMeTo( orig, destination ) {
  var $copy = $(orig).clone().insertAfter($(orig)); // duplicate the original button element

  $copy.css({position:"fixed"}); // dunno what this is for
  $(orig).css({opacity:0}).appendTo(destination); // make the orig invisible then append it to the other div still invisible

  var end = orig.getBoundingClientRect(); // now that the orig is at the new location, get its position
  $copy.animate({left:end.left, top:end.top}); // animate the duplicate to make it go to that position  
}

- Jun Dalisay

通过剥离被接受的答案的代码，您犯了一些重要的错误。1. 您没有为飞行元素设置初始位置。2. 在追加$orig元素之后，您从未将其不透明度重置为1。3. 您从未销毁飞行克隆元素。4. 您正在使用克隆而不是追加的元素。 - 因此，总结一下，飞行克隆仅用于动画/视觉目的。我建议您删除此答案（因为没有添加任何新内容或更好的内容），如果需要代码解释、澄清，请在提供的答案的评论部分留言。 - Roko C. Buljan

我只需要将元素移动到其他div中，剥离版本仍然可以工作：http://jsfiddle.net/cybxj0aw/1/ - Jun Dalisay

从你的角度来看，它是有效的。如果您检查源代码，在单击所有3个图像后，您实际上将在DOM中拥有6个图像！另一个问题：单击图像并尝试滚动BODY：http://jsfiddle.net/RokoCB/cybxj0aw/4/ - Roko C. Buljan

你的代码还有一个问题，如果你绑定了事件到你的飞行元素上，一旦它们不正确地飞行，所有的事件都会丢失 http://jsfiddle.net/RokoCB/cybxj0aw/9/. 如果你使用建议答案的代码 - 一切都会好得多: http://jsfiddle.net/RokoCB/cybxj0aw/10/。 - Roko C. Buljan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

在当前坐标处创建元素的“飞行克隆”，使用position:fixed属性。
将该元素添加到目标位置
使用visibility:hidden或opacity:0使元素隐藏
动画效果地将克隆从起始坐标移动到元素的新坐标
销毁克隆
使元素可见
如果元素已经在目标位置，防止其飞行（例如：在后续调用中）

/** 
 * Fly element to destination parent
 * Use like: flyMeTo("#bird", "#destinationParent")
 * @param el {String} Selector (or `this`) of the flying element
 * @param destination {String} Destination parent selector
 * @param prepend {Boolean} Optional. Set to true to use prepend (instead of append)
 */
function flyMeTo(elem, destination, prepend) {

  var $elem = $(elem);
  var $dest = $(destination);
  
  // Early exit - if already in destination
  if($elem.parent().is(destination)) return;
  
  var $klon = $elem.clone().insertAfter($elem);
  var start = elem.getBoundingClientRect();

  $klon.css({position:"fixed", zIndex:9999, left:start.left, top:start.top, pointerEvents:'none'});
  $elem.css({opacity:0})[prepend?'prependTo':'appendTo']( $dest );

  var end = elem.getBoundingClientRect(); // Get new coordinates after append/prepend
  $klon.animate({left:end.left, top:end.top}, 600, function() {
    $klon.remove();         // Remove flying clone once it reaches destination
    $elem.css({opacity:1}); // Show original Element
  });
}


// DEMO:
$('#b1').click(function() {
  flyMeTo( this, '#bottom', true ); // By passing `true` it will prepend!
});
$('#b2').click(function() {
  flyMeTo( this, '#top' );
});

body {
  height: 200vh;
}

<br>
<br>
<br>
<div id="top">
  <button id="b1">B1</button>
</div>
<br>
<br>
<br>
<br>
<div id="bottom">
  <button id="b2">B2</button>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>