網格縮略圖擴大到全屏點擊並過渡到新頁面

我想了解this website如何實現這種效果，如果我點擊縮略圖，文本消失，縮略圖展開以適應屏幕並顯示帖子。網格縮略圖擴大到全屏點擊並過渡到新頁面

我一直在試圖谷歌各種組合如何描述效果 - 網格，縮略圖，縮放，放大，單擊，展開，全屏等 - 但我找到教程沒有運氣。

我也嘗試過使用Chrome DevTools動畫/元素檢查器來試圖瞭解到底有哪些元素正在改變，但我似乎無法弄清楚。我可以看到，帖子內容與最初具有0px的類「feed」一起進入div，但當縮略圖實際擴大時，我看不到實際動畫在哪裏發生。

任何有關如何在一般水平上實現這種轉換效果的幫助或者如何使用開發人員工具來解決這一問題將非常感激。

來源

2017-04-21 Chang Liu

的div只是縮放+不透明度 –

有很多方法可以達到這個效果。但是，您使用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>

來源

2017-04-21 08:39:07

網格縮略圖擴大到全屏點擊並過渡到新頁面

回答

相關問題