Question

这是我想要的效果的一个示例：
http://photoswipe.com/
在WhatsApp网站上将相同的效果用于图像缩放。

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

我尝试了以下代码，但没有完成该工作：

<div></div>

使用CSS：

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

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

而且，动画转换之间的区别是：缩放还是宽度/高度？

谢谢

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

Answer 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>

Answer 2

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

在这种情况下，偏移x和y为30px，因为我将父div填充设置为30px。

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

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

在photowipe上，他们使用的是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>

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

2 个答案: