Question

我正在尝试理解this website如何实现这种效果，如果我点击缩略图，文本消失，缩略图展开以适应屏幕并显示帖子。

我一直试图谷歌各种组合如何描述效果 - 网格，缩略图，缩放，放大，点击，展开，全屏等等 - 但我没有找到教程的运气。< / p>

我还尝试使用Chrome DevTools动画/元素检查器来尝试准确理解哪些元素正在发生变化，但我似乎无法弄明白。我可以看到帖子内容进入了一个带有“feed”的div，它原来有0px但是当缩略图实际扩大时我看不到实际动画发生的位置。

如何在非常一般的层面上实现这种过渡效果或者如何使用开发人员工具来解决这个问题的任何帮助都将非常感激。

Answer 1

有很多方法可以达到这种效果。但是你使用Chrome Devtools并检查网站，你可以看到它在许多元素上使用3D变换。

我的猜测是该网站将一些Javascript与3D变换结合使用。只需使用CSS即可实现非常强大的动画。

您可以看到一个快速而肮脏的示例，演示了下面的简单转换。

$(document).ready(function(){
 $('.scale-div').click(function(){
  $(this).addClass('active');
 });

});

html,body{
margin:0;
padding:0;
}

div{
height:100px;
width:200px;
background-color:red;
transition:transform .5s ease;
}

.active{
  transform:scale(3);
  transition:transform .5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scale-div">
</div>

网格缩略图在单击时展开到全屏，并转换到新页面

1 个答案: