2015-11-10 164 views
0

我想創建一個菜單,看起來有點像我們有時可以看到的論文「應用程序面板」。元素跳過懸停的其他元素的CSS動畫

所以我有6個元素,並排側,它們之間沒有空間,當我徘徊其中的一個稍微彈出,你可以在這裏看到:

#account-bubble .account-param { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t position: absolute; 
 
\t display: inline-block; 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t border: 1px solid #CCC; 
 
\t background: #F7F7F7; 
 
\t -webkit-transition-duration: 0.3s; 
 
\t transition-duration: 0.3s; 
 
\t -webkit-transition-property: transform; 
 
\t transition-property: transform; 
 
\t z-index: 0; 
 
} 
 
#account-bubble .account-param:hover, #account-bubble .account-param:focus, #account-bubble .account-param:active { 
 
\t -webkit-transform: scale(1.2); 
 
\t transform: scale(1.2); 
 
\t z-index: 5000; 
 
} 
 

 
.p1 { 
 
\t top: 15px; 
 
\t left: 15px; 
 
} 
 

 
.p2 { 
 
\t top: 15px; 
 
\t left: 74px; 
 
} 
 

 
.p3 { 
 
\t top: 15px; 
 
\t left: 133px; 
 
} 
 

 
.p4 { 
 
\t top: 74px; 
 
\t left: 15px; 
 
} 
 

 
.p5 { 
 
\t top: 74px; 
 
\t left: 74px; 
 
} 
 

 
.p6 { 
 
\t top: 74px; 
 
\t left: 133px; 
 
} 
 

 
#account-bubble .profil-picture img { 
 

 
} 
 

 
#account-bubble .account-param { 
 
\t 
 
}
<div id="account-bubble"> 
 
\t \t \t <div class="account-param p1"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p2"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p3"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p4"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p5"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p6"> 
 
\t \t \t </div> 
 
\t \t </div>

要做到這一點,我必須將我的元素的位置設置爲absolute,然後將它們中的每個1px放置在它們的元素鄰居上,以避免出現2px邊框。 (由於轉換css導致元素彈出,所以無法使用帶有邊框摺疊的表格 - 它會在沒有邊框的情況下彈出)。

我的問題是,當我懸停一個元素時,我的代碼執行了我期望,但是當我離開我的光標時,元素立即將其z-索引重置爲其初始值,使得「unhover動畫」非常難看。

有沒有人有任何想法/建議如何我可以實現這個把戲?或者更好的替代我的代碼? (我會優先考慮堅持使用CSS)

感謝您的幫助。

回答

2

如果你想減少z-index慢慢地,你可以使用transition爲確保包括在您的過渡。

-webkit-transition-property: transform, z-index; 
transition-property: transform, z-index; 

如果你想使用不同的懸停/懸停關閉選項,你可以。

#element { 
    /* HOVER OFF */ 
    -webkit-transition-property: transform, z-index; 
    transition-property: transform, z-index; 
} 

#element:hover { 
    /* HOVER ON */ 
    -webkit-transition-property: transform; 
    transition-property: transform; 
} 
+0

感謝您的回答,這比我所做的更好,謝謝。然而,動畫仍然有點草率,你知道是否有辦法讓過渡效果只有徘徊,但不是當我懸停時? CSS允許嗎? – apatik

+0

@apatik是的,這是可能的。檢查我更新的答案。 – Genhis

+0

謝謝!現在,我可以調整數字以獲得完美的幻燈片。 – apatik

1

的Z-index設置動畫,方法是使用transition-property: all;

#account-bubble .account-param { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t position: absolute; 
 
\t display: inline-block; 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t border: 1px solid #CCC; 
 
\t background: #F7F7F7; 
 
\t -webkit-transition-duration: 0.3s; 
 
\t transition-duration: 0.3s; 
 
    /* change the transition-property to all */ 
 
\t -webkit-transition-property: all; 
 
\t transition-property: all; 
 
\t z-index: 0; 
 
} 
 
#account-bubble .account-param:hover, #account-bubble .account-param:focus, #account-bubble .account-param:active { 
 
\t -webkit-transform: scale(1.2); 
 
\t transform: scale(1.2); 
 
\t z-index: 5000; 
 
} 
 

 
.p1 { 
 
\t top: 15px; 
 
\t left: 15px; 
 
} 
 

 
.p2 { 
 
\t top: 15px; 
 
\t left: 74px; 
 
} 
 

 
.p3 { 
 
\t top: 15px; 
 
\t left: 133px; 
 
} 
 

 
.p4 { 
 
\t top: 74px; 
 
\t left: 15px; 
 
} 
 

 
.p5 { 
 
\t top: 74px; 
 
\t left: 74px; 
 
} 
 

 
.p6 { 
 
\t top: 74px; 
 
\t left: 133px; 
 
} 
 

 
#account-bubble .profil-picture img { 
 

 
} 
 

 
#account-bubble .account-param { 
 
\t 
 
}
<div id="account-bubble"> 
 
\t \t \t <div class="account-param p1"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p2"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p3"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p4"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p5"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p6"> 
 
\t \t \t </div> 
 
\t \t </div>

+0

感謝您的回答,您的解決方案看起來與Genhis的解決方案類似,並且工作正常!然而,正如你所看到的,動畫仍然有點草率,我想知道CSS是否允許只有當我懸停時纔能有一個過渡效果,但是當我懸停時不會。 CSS可以區分這個嗎?無論如何感謝您的幫助! – apatik