javascript - Ajax图像页面过渡

我刚刚在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）进行定义。每个持续时间2s）。

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

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

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

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