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

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>