javascript - 使 div 带有动画飞到另一个 DOM 位置

Question

我正在移动 <img>来自大灰色的元素( Octopus )<div>以上(#large)给小橘子<div>下面(#small)使用

$(document).on("click", "#large > img", function() {
  $(this).appendTo("#small");
});

这很好用，但我希望它平滑过渡并“飞”过去，这样它会慢慢插入其坐标和大小。

我尝试添加一个 CSS 过渡

img { transition: all 3s; }

到我的<img> ，但这将不起作用，因为图像被重新添加到 DOM 而不是移动。

这样的动画如何制作？

JS Fiddle

Answer 1

使用 jQuery .append 方法不允许您在两种状态之间为元素设置动画。

这是一个使用 CSS 过渡和 scale() 函数的动画示例。此示例还使用 transform-origin 属性更改图像在“大”状态下的位置。 Fiddle here .

$(document).on("click", "img", function() {
  $(this).toggleClass("big");
});

div {
  margin: 20px;
  padding: 10px;
}

#large {
  width: 600px;
  height: 400px;
  background-color: gray;
}

#small {
  width: 120px;
  height: 90px;
  background-color: orange;
}

img {
  width: 100%;
  height: 100%;
  transition: transform .3s ease-out;
  transform-origin: 0 129px;
}

img.big {
  transform: scaleX(5) scaleY(4.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="large">

</div>
<div id="small">
  <img src="https://ak.picdn.net/assets/cms/5bb580387901a83212e3028ab5a2fa8fb1153d7b-img_offset_2x.jpg" />
</div>

注意:

• 您需要根据需要支持的浏览器，将 vendor 前缀添加到 transition、transform 和 transform-origin 属性。
• 此技术依赖于您使用硬值(以像素为单位)这一事实。可以使其具有响应性(使用宽度、边距和填充的百分比值)，但需要更多计算。