CSS3 中 transition-duration 對 display: none/block 屬性無效?
問題描述
代碼如下面所示,我用 transition-duration 對 display: none/block 屬性和 width 屬性進行2秒慢動作切換。但是,實際展示的時候,width 變換確實用了2秒,但display并沒有,請問這是為什么呢?
HTML
<p class=’transition-example’ id=’width-duration’> <p class='box'>o</box></p>
CSS
.transition-example { width: 40px; height: 40px; background: red; margin: 30px; color: #FFF; font-size: 20px;} #width-duration, .box { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s;} #width-duration:hover { width: 80px;}.box { display: none;}#width-duration:hover .box { display: block; } ?
?http://jsfiddle.net/u2MXQ/
問題解答
回答1:看W3文檔中支持的屬性:http://www.w3.org/TR/css3-transitions...
目前display屬性不受支持。猜想原因是因為緩動是基于數值和時間的計算(長度,百分比,角度,顏色也能轉換為數值),文檔說明在此:http://www.w3.org/TR/css3-transitions... 。而display是一個尷尬的屬性,該計算什么值實現?
因此解決方案是利用支持的屬性如:opacity: 0 或者 width:0, height:0 或者 visibility:hidden 來達到視覺上的隱藏效果。
如果目標元素中有鏈接之類那么推薦用visibility而不是opacity,因為opacity為0時鏈接仍可以被點擊。
相關文章:
1. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?2. javascript - ios返回不執行js怎么解決?3. javascript - vue2如何獲取v-model變量名4. node.js - vue中 post數據遇到問題5. 前端 - 誰來解釋下這兩個 CSS selector 區別6. javascript - 求幫助 , ATOM不顯示界面!!!!7. html5 - HTML代碼中的文字亂碼是怎么回事?8. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示9. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處10. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題
