-webkit-transition：屬性在bubble元素中不起作用？

我正在創建一個投資組合，我希望它能夠讓有人在我的名字周圍盤旋時出現一個帶箭頭的泡泡。我已經完成了這部分，但問題是-webkit-transition屬性不起作用。這個泡泡與我的名字有點相似，所以我想要它，所以需要一點時間才能再次隱藏，所以有人可以很容易地去找它，因爲我正在考慮讓表單與我聯繫。-webkit-transition：屬性在bubble元素中不起作用？

我的HTML：

<div id="side-bar"><h1 id="ab_me">About Me</h1> 
<img src="saksham.png" id="saksham"> 
<p id="name"><span>S</span>aksham <span>C</span>hauhan</p> 

<div id="bubble"> 
SUP ! 
<div id="bubble-arrow-border"> 
</div> 
<div id="bubble-arrow"> 
</div> 
</div> 

</div>

我的CSS：

div#side-bar p 
{ 
font-size:25; 
border-bottom:2px solid red; 
position:absolute; 
left:10px; 
color:#F63737; 
} 
div#side-bar p:hover 
{ 
border-bottom:2px groove #C01F1F; 
color:#C01F1F; 
text-shadow:0px 1px 2px #F98378; 
-webkit-transition:1s; 
} 
div#side-bar p span 
{ 
font-size:40px; 
} 
div#side-bar p:hover ~ #bubble 
{ 
display:block; 
visibility:visible; 
opacity:1; 
-webkit-transition:5s; 
} 
div#side-bar p #bubble:hover 
{ 
display:block; 
visibility:visible; 
opacity:1; 
} 
#bubble 
{ 
background-color:#EDEDED; 
visibility:hidden; 
border:2px solid #666666; 
font-size:35px; 
line-height:1.3em; 
padding:10px; 
position:absolute; 
text-align:center; 
width:300px; 
-moz-border-radius:15px; 
-webkit-border-radius:15px; 
-moz-box-shadow:0 0 5px #888888; 
-webkit-box-shadow:0 0 5px #888888; 
z-index:100; 
left:230px; 
top:400px; 
display:none; 
-webkit-transition:5s; 
opacity:0; 
} 
#bubble-arrow 
{ 
border-color:transparent #EDEDED transparent transparent; 
border-style: solid; 
border-width: 15px; 
height:0; 
width:0; 
position:absolute; 
bottom:25px; 
left:-28px; 
z-index:100; 
} 
#bubble-arrow-border 
{ 
border-color:transparent #666666 transparent transparent; 
border-style: solid; 
border-width: 15px; 
height:0; 
width:0; 
position:absolute; 
bottom:25px; 
left:-31px; 
}

來源

2013-03-03 Thakur Saksham Chauhan

你必須告訴它什麼過渡性質。它看起來像你試圖做到這一點：

transition:all 1s ease; 
-webkit-transition:all 1s ease;

來源

2013-03-03 04:34:56

沒有工作兄弟，但thanx！ – 2013-03-03 04:53:47

我認爲這是可選的，因爲'property'和'timing-function'的'transition'屬性的初始值是'all'和'ease' https://developer.mozilla.org/zh-CN/docs/CSS/transition – xpy 2013-03-03 09:35:09

當您使用transition你必須有這兩種狀態設置爲「後」（例如，你從一無所有到opacity:0着的轉變，但你可以從「之前」和opacity:1至opacity:0）。另外，您不能在display上進行轉換，但可以在visibility上轉換。

這裏的一些關於轉換：https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

來源

2013-03-03 09:39:07 xpy

好的，我獲得了你的觀點，但是我從來沒有使用過後面的和之前的選擇器......你能否想出一個合適的解決方案？並請嘗試避免使用JavaScript。謝謝。 – 2013-03-03 11:31:31

我不是在討論「之前」和「之後」選擇器，而是在過渡之前和之後的元素狀態，意思是「從」和「到」。更清楚一點：'#bubble {opacity：0}'是'from'狀態，'#bubble：hover {opacity：1}是'to'狀態。對不起，有任何困惑。 – xpy 2013-03-03 11:36:24

不要張貼整個代碼，只有相關的代碼。

CSS轉換不適用於display:none。當我不得不使用display:none時，我必須使用Javascript來補充我的CSS。

所以，如果你從#bubble刪除display:none，然後用：

-webkit-transition:all 1000ms;

在#bubble，然後有#bubble:hover組改變不透明度爲1：

opacity:1;

你的泡沫會褪色在，然後淡出。

http://jsfiddle.net/charlescarver/nrTMg/1/

來源

2013-03-03 16:16:21 Charlie

-webkit-transition：屬性在bubble元素中不起作用？

回答

相關問題