CSS动画-将元素从其位置放大到中心

Question

CSS动画-将元素从其位置放大到中心

3

这是我想要的效果示例：
http://photoswipe.com/
同样的效果也用于WhatsApp网络版中的图像缩放。

我想将元素（不仅仅是图片）缩放到中心，并使用动画从其位置缩放到页面中心。
动画应基于CSS，JS不应用于动画效果。

我尝试了以下代码，但未达到预期效果：

<div></div>

使用CSS：

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

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

那么，使用transform：scale或width/height进行动画有什么区别呢？

谢谢。

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

- user3599803

2个回答

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

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

- DanOPT · Answer 1

您可以将图像位置设置为固定，但需要知道图像的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>

- Ashley Fernandes · Answer 2

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

此外，使用缩放进行动画处理更好，因为如果有多个图像，则可能不知道像素的确切高度和宽度，并且使用相同的缩放值可以使您的代码具有一致性。希望能对您有所帮助。

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>