使用动画将div飞到另一个DOM位置

Question

我正在使用一个<img>元素(章鱼)从<div>上面的大灰色(#large)到<div>下面的小橙色(#small)

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

这很好但我希望它能够平滑过渡并"飞行",因此它会慢慢插入其坐标和大小.

我尝试添加CSS转换

img { transition: all 3s; }

对我来说<img>,但这不会起作用,因为图像被读取到DOM而不是被移动.

如何建立这样的动画？

JS小提琴

Answer 1

使用jQuery .append方法将不允许您在2个状态之间设置元素的动画.

这是一个使用CSS转换和scale()函数的动画示例.此示例还使用transform-origin属性来更改"大"状态下图像的位置.小提琴这里.

$(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>

注意 :

• 您需要根据需要支持的浏览器向转换,转换和转换源属性添加供应商前缀.
• 这种技术依赖于您使用硬值(以像素为单位)的事实.可以使这个响应(使用宽度,边距和填充的百分比值),但它需要更多的计算.