Question

我正在设计一个potal框架，我在主div中有多个portlet（div）。当我移动div时，我希望它移动到页面顶部并垂直展开。 然而，所有这些都有效，我想为移动部件制作动画。

这就是我的代码看起来像

$('#smallpotletdiv').prependTo($('#maindiv'));

对于动画有更多了解的人会提出什么建议？我如何显示div从其当前位置移动并将其自身附加到新位置？

Answer 1

我认为你可以使用：

  $('#smallpotletdiv').animate

您可以使用它的参数：for ex

width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'

JQuery animate

Answer 2

最后使用animate和prepend来玩位置。完成前置后，将值更改为默认值

$("#smallpotletdiv").animate({
      top: 300,
      left: 500     
}).prependTo($("#maindiv")).css({
      top: 'auto',
      left: 'auto'
});

更新

您的工作代码看起来像这样

current.animate({
  top: -30,
  left: -20     
}, 2000, function() {
    current.prependTo(prependToDiv).css({
       top: 'auto',
       left: 'auto'
    });        
});

Check Here

执行的问题在于，您没有将元素定位为可以通过左侧和顶部移动。为此，元素必须绝对定位，即position: absolute。

Answer 3

实现此功能的一个很酷的工具是名为react-magic-move的ReactJS工具 https://www.npmjs.com/package/react-magic-move

这有可能操纵DOM以平滑的方式更改元素所在的位置。但是，它实现起来并不容易，因为它不受支持并使用过时的ReactJS版本。

请参阅此处的演示： https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424

动画div从一个地方移动到另一个地方

3 个答案:

更新

Check Here