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