網格縮略圖會在單擊時擴展到全屏並過渡到新頁面

Question

我試圖了解該網站如何實現此效果，如果單擊縮略圖，該文本將消失，並且縮略圖將展開以適合屏幕並顯示帖子。

我一直在嘗試通過Google搜索各種組合來描述效果-網格，縮略圖，縮放，放大，單擊，展開，全屏等-但是我在尋找教程方面沒有運氣。

我還嘗試使用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>