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; 
} 

他們基本上通過定義「開始」值工作（在我們的情況下寬度內.normal &高度），也對如何使過渡和哪些屬性將它應用到一個定義（在我們的例子width和height每個持續2s）。

如果您現在向具有不同值屬性的元素（在我們的示例中爲.transition）添加一個類，它們將被動畫爲新值。

要完成該示例，我還添加了一些在轉換完成後淡入的文本。

javascript部分非常簡單：單擊圖像時，添加.transition類，然後等待2秒（過渡時間），最後淡入文本。

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