提升MD-卡角材料

Question

根據材料設計規格：

在桌面上，卡可以有一個0dp休息海拔和懸停搶佔 海拔8DP的。

如何使用Angular Material 2創建此動畫效果？

我曾考慮過用(hover)=和動畫做這個。我並不十分關心這個方法，我更希望它能夠提升懸停。原因是，我在我的用戶界面中使用卡作爲按鈕。

Answer 1

至於我，它會更好地使用預定義的CSS類。當用戶懸停在md-card上時，切換此類。要改變evelavtion使用mat-elevation-z{{elevationValue}}

Answer 2

要更改MD卡的高度，創建一個類像以下：

.z-depth:hover { 
    box-shadow: 0 8px 8px 8px rgba(0,0,0,.2), 0 8px 8px 0 rgba(0,0,0,.14), 0 8px 8px 0 rgba(0,0,0,.12) !important; 
    transform: translate3d(0,0,0); 
    transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1); 
} 

您可以更改box-shadow號碼找到你正在尋找的確切高度。

Plnkr demo。