css 动画 - 将元素从其位置缩放到中心答案

【问题标题】：css animation - zooming element from its position to centercss 动画 - 将元素从其位置缩放到中心
【发布时间】：2019-01-29 12:14:00
【问题描述】：

这是我想要的效果示例：
http://photoswipe.com/
WhatsApp web 上的图像缩放使用相同的效果。

我想将元素（不仅仅是图像）缩放到中心，并使用动画缩放元素从其位置到页面中心。
动画应该是基于css的，JS不应该用于动画目的。

我尝试了以下代码，但无法完成工作：

<div></div>

使用 css：

div {
  width: 100px; height: 100px; background: blue;
transition: transform 1s
}

div:hover {
  transform: scale(2);
}

而且，动画变换有什么区别：比例或宽度/高度？

谢谢

编辑：
另一种尝试： http://jsfiddle.net/4w06Lvms/

【问题讨论】：

标签： javascript css css-animations zooming

【解决方案1】：

我制作了与您想要的类似的东西（全屏查看）。您可以根据需要对其进行修改。将指针移出屏幕以返回原始状态。

此外，使用比例制作动画效果更好，因为如果有多个图像，您可能不知道确切的高度和宽度（以像素为单位），并且使用相同的比例值可以使您的代码保持一致。希望对您有所帮助。

html,body{
  margin:0;
}

.container{
  background:yellow;
  display:flex;
  width:100vw;
  height:100vh;
  justify-content:center;
  transition: 0.5s ease;
  vertical-align:center;
}
.imageHover{
  display:flex;
  height:300px;
  width:200px;
  transition: 0.5s ease;
}
img{
  position:absolute;
  height:300px;
  width:200px;
  transition: 0.5s ease;
}
.container:hover > .imageHover{
  height:100vh;
  background-color:black;
  width:100vw;
  transition: 0.5s ease;
}
.container:hover > .imageHover > img{
  transform:translate(240%,50%) scale(1.6);
  transition: 0.5s ease;
}

<div class="container">
 <div class="imageHover">
  <img  id="yo" src="https://picsum.photos/200/300
" alt="">
 </div>
</div>

【讨论】：

如果我的元素没有固定高度怎么办？我的元素在引导网格内
这样更好.. 因为我知道尺寸，所以我使用了固定尺寸。 img 位于具有类 imageHover 的 div 中，该类扩展为全屏（黑色背景）。所以图像的大小无关紧要。
请标记为选择的答案，这样它也可以帮助其他人。
我已经用我的例子尝试了你的 translate() ，但问题是，并不是每个元素实际上都是居中的。在这里查看我的尝试：jsfiddle.net/4w06Lvms。所以使用 translate(240%, 50%) 并不适用于每个元素（它不会将元素带到中心）
你不能用引导网格来做到这一点，因为父元素必须是全屏jsfiddle.net/supercoder123/qu5e6b19我在这里尽力了。它并不完美，但我希望它有所帮助

【解决方案2】：

您可以将图像的位置设置为固定，但您需要知道图像的 x 和 y 位置的偏移量，然后才能开始动画。

在这种情况下，偏移量 x 和 y 为 30px，因为我已将父 div 内边距设置为 30px。

当窗口向下或向右滚动时。您必须重新计算图像的顶部和左侧值。为此，您将需要 JS。

在将位置设置为固定之前，我已将顶部和左侧设置为偏移值。然后图像开始在正确的位置移动。

在 photoswipe 上，他们使用 translate3d() 函数并且他们也在使用 JS。我不知道他们在做什么。

#image {
  /* top and left offset */
  top: 30px;
  left: 30px;
  width: 200px;
  height: 200px;
  transition: top 2s, left 2s, transform 2s;
}

#image:hover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#offset {
  background-color: beige;
  height: 1000px;
  /* given offset */
  padding: 30px;
}

<div id="offset">
  <img id="image" src="https://picsum.photos/200/300
" alt="">
</div>

【讨论】：