Ajax图像页面转换

Question

我刚看到Behance上的一个非常酷的页面转换，你点击一个图像，它只是扩展到一个新的div（我认为）与50％的。有人可以向我解释如何进行这项工作或有一个例子吗？过渡到这里：

https://vimeo.com/162486588

Answer 1

如果您愿意，可以使用css transitions。检查我为您写的example。

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

.transition {
    width: 50%;
    height: auto;
}

基本上它们通过定义'start'值（在我们的例子中是宽度和高度.normal内）来定义，以及如何进行转换以及将它应用于哪些属性的定义（在我们的例子中{{ 1}}和width每个持续时间为2秒）。

如果现在向具有不同值属性的元素（在我们的示例中为height）添加一个类，它们将被设置为新值的动画。

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

javascript部分相当简单：单击图像时，添加.transition类，然后等待2秒（转换持续时间），最后淡入文本。

.transition