摘要:應用場景用戶上傳頭像,實時顯示并裁減實現方式模塊外部容器設置,剪裁區域里面放一個加載效果,設置。圖片尺寸獲取成功后,再正常初始化,然后讓外部容器屬性重置為。這樣體驗就會好很多,用戶只會看到加載中剪裁界面,而不是占位界面加載中最終操作界面。
一、Display 幾種隱藏方式
使用標簽:
獲取標簽隱藏的內容:
script.innerHTML
使用display:none隱藏
.hidden { position: absolute; visibility: hidden; }
visibility:hidden
.clip { position: absolute; clip: rect(0 0 0 0); // clip 屬性剪裁絕對定位元素,唯一合法的形狀值是:rect (top, right, bottom, left) } .out { position: relative; left: -999em; }
.lower { position: relative; z-index: -1; }
.opacity { position: absolute; //position的作用是使元素脫離文檔流,使其不占據空間 opacity: 0; filter: Alpha(opacity=0); }
.opacity { opacity: 0; filter: Alpha(opacity=0); }
Display:none顯示隱藏不會影響animation動畫,但是會影響transition過渡效果的執行,所以transition往往和visibility搭配
二、Visibility與元素的隱顯父元素設置 visibility:hidden,子元素也會看不見,究其原因是繼承性,子元素繼承了 visibility:hidden,但是,如果子元素設置了 visibility:visible,則子元素又會顯示出來,這個和 display 隱藏有著質的區別。
應用場景: 用戶上傳頭像,實時顯示并裁減
實現方式: 模塊外部容器設置 visibility:hidden,剪裁區域里面放一個加載效果,設置visibility:visible。圖片尺寸獲取成功后,再正常初始化,然后讓外部容器 visibility 屬性重置為 visible。這樣體驗就會好很多,用戶只會看到“加載中→剪裁界面”,而不是“占 位界面→加載中→最終操作界面”。
visibility:hidden 不會影響計數器的計數
hover屬性下,下述代碼會在hover時顯示target子元素,但是不會有過渡效果
.box > .target { display: none; position: absolute; opacity: 0; transition: opacity .25s; } .box:hover > .target { display: block; opacity: 1; }
下面的代碼可以實target子元素現淡入淡出的過渡效果,這是由于CSS3 transition支持的CSS屬性中有visibility,但是并沒有 display。
.box > .target { position: absolute; opacity: 0; transition: opacity .25s; visibility: hidden; } .box:hover > .target { visibility: visible; opacity: 1; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114253.html
摘要:元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結界,而自身也可能處于其他層疊結界中。 上一篇:《CSS世界》筆記四:流的保護與破壞 寫在前面 《CSS世界》這本書還剩六章,但是這本書的精華部分主要是前面的內容,這里僅把后面章節相對重要的內容以博客展示,想著了解更多的小伙伴還是去閱讀原文的好,畢竟三百多頁的一本書并不是小小幾篇博客能完全說...
摘要:和可以看作是同父異母的兄弟關系。例子如下結果如下而父元素設置屬性的方式則是利用了的特性下面將會詳細講解結界全稱為,中文為塊級格式化上下文。 上一篇:《CSS世界》筆記三:內聯元素與對齊下一篇:《CSS世界》筆記五:CSS層疊規則及元素隱藏 寫在前面 原本博客名為浮動與定位,但是《CSS世界》第六章節的內容不僅有浮動定位,很大一部分篇幅都在講BFC和overflow。更吸引人的是,作者將...
摘要:要實現這一點,必須規定兩項內容指定要添加效果的屬性指定效果的持續時間。當動畫完成后,保持最后一個屬性值在最后一個關鍵幀中定義。在所指定的一段時間內,在動畫顯示之前,應用開始屬性值在第一個關鍵幀中定義。 1.前言 css3這個相信大家不陌生了,是個非常有趣,神奇的東西!有了css3,js都可以少寫很多!我之前也寫過關于css3的文章,也封裝過css3的一些小動畫。個人覺得css3不難,但...
摘要:目前在前端開發所占的比重越來越高,在我們學習和開發的過程中都會去使用。下面把程序員雷雪松對的知識點總結和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個元素。返回指定元素相對于其他指定元素的位置。 jQuery目前在Web前端開發所占的比重越來越高,在我們jQuery學習和開發的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...
閱讀 1981·2019-08-30 15:54
閱讀 3532·2019-08-30 15:52
閱讀 1822·2019-08-29 17:20
閱讀 2513·2019-08-29 17:08
閱讀 2346·2019-08-26 13:24
閱讀 780·2019-08-26 11:59
閱讀 2780·2019-08-23 14:50
閱讀 610·2019-08-23 14:20