我刚刚在 Behance 上看到了一个非常酷的页面转换，您单击一个图像，它就会扩展到一个新的 div(我认为)，宽度为 50%。有人可以向我解释如何进行这项工作或举个例子吗？在此过渡:

https://vimeo.com/162486588

请您参考如下方法:

您可以使用css transitions如果你喜欢。检查example这是我为你写的。

.normal { 
    float: left; 
    margin-right: 10px; 
    width: 10%; 
    height: auto; 
    transition: width 2s, height 2s; 
} 
 
.transition { 
    width: 50%; 
    height: auto; 
} 

基本上，它们通过定义“起始”值(在我们的例子中是 .normal 内的宽度和高度)以及如何进行转换以及将其应用到哪些属性的定义来工作(在我们的例子中)情况 width 和 height 各持续 2 秒)。

如果您现在向具有不同值的属性的元素添加一个类(在我们的示例中为.transition)，它们将被动画化为新值。

为了完成该示例，我还添加了一些在转换完成后淡入的文本。

JavaScript 部分相当简单:单击图像时，添加 .transition 类，然后等待 2 秒(过渡持续时间)，最后淡入文本。

$('img').click(function() { 
    $(this).addClass('transition'); 
    setTimeout(function() { 
            $('.text').fadeIn(); 
    }, 2000); 
});