成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

max-height實(shí)現(xiàn)任意高度元素的展開(kāi)收縮動(dòng)畫(huà)

xuxueli / 1615人閱讀

摘要：前言在說(shuō)到實(shí)現(xiàn)元素的展開(kāi)收縮，通常的想法是通過(guò)控制的元素屬性和之間的切換，雖然說(shuō)功能可以實(shí)現(xiàn)，但是這種展開(kāi)是沒(méi)有任何動(dòng)畫(huà)的效果，只是單純的顯示與隱藏。

http://dobinspark.com.cn/

前言：

　　在說(shuō)到實(shí)現(xiàn)元素的展開(kāi)收縮，通常的想法是通過(guò)控制display的元素屬性和none之間的切換，雖然說(shuō)功能可以實(shí)現(xiàn)，但是這種展開(kāi)是沒(méi)有任何動(dòng)畫(huà)的效果，只是單純的顯示與隱藏。例外一種方法就是通過(guò)JQuery的slideUp()、slideDown()方法，這是jQuery帶有的功能屬性，大家都應(yīng)該很清楚，在有些情況下JavaScript框架都是沒(méi)有動(dòng)畫(huà)模塊的，比如移動(dòng)端，所以使用CSS實(shí)現(xiàn)動(dòng)畫(huà)效果就成了最好的選擇。

　　下面我們將說(shuō)一說(shuō)max-height的二三事!

?　　1.先上CSS參考手冊(cè)關(guān)于max-height的說(shuō)明

　　2.

　　　　使用CSS實(shí)現(xiàn)展開(kāi)收縮的效果第一想法就是通過(guò)height+overflow:hidden實(shí)現(xiàn)，使用過(guò)這種方式的一般都知道在實(shí)現(xiàn)的過(guò)程都是將height的高度固定寫(xiě)死，高度auto的話(huà)是無(wú)法形成過(guò)渡的動(dòng)畫(huà)效果，auto是一個(gè)關(guān)鍵字值，并非數(shù)值，因此，height:100%的100%和auto兩者，height從0px到auto也是無(wú)法計(jì)算的。

　　上實(shí)例：

      /*css*/  
.element{
            height: 0;
            overflow: hidden;
            transition: height .25s;
            background-color: pink;
        }
        :checked ~ .element{
            height: 100%; /*高度100%和auto都是生硬的效果，給定具體值可以實(shí)現(xiàn)動(dòng)畫(huà)*/
        }

/* html*/
<input id="check" type="checkbox">
<div class="element">
     <div class="box" style="width: 100%;height: 800px">div>
div>
<label for="check" >收縮label>

　　max-height的方法實(shí)現(xiàn)過(guò)程：

/*css*/
        .element{
            max-height: 0;
            overflow: hidden;
            transition: max-height .25s;
            background-color: pink;
        }
        :checked ~ .element{
            max-height: 2000px; /*足夠存放內(nèi)容的高度*/
        }
/*html*/
<input id="check" type="checkbox">
<div class="element">
     <div class="box" style="width: 100%;height: 800px">div>
div>
<label for="check" >收縮label>

?這樣寫(xiě)的max-height，給定足夠大的高度，就是言義上的任意高度，相對(duì)height來(lái)說(shuō)比較靈活，兩者的區(qū)別就是計(jì)算高度的過(guò)程，一個(gè)是由人為計(jì)算，一個(gè)由盒子內(nèi)容高度去計(jì)算知識(shí)這種寫(xiě)法必須給定足夠存放內(nèi)容的高，寫(xiě)的時(shí)候盡量寫(xiě)大一點(diǎn)。

后記：當(dāng)初看了張?chǎng)涡竦腃SS世界，對(duì)max-height有過(guò)一點(diǎn)印象，最近接觸使用到height展開(kāi)收縮動(dòng)畫(huà)這一點(diǎn)，所以寫(xiě)編文章記錄學(xué)習(xí)一下，關(guān)于這一點(diǎn)詳細(xì)的具體介紹可以參考《CSS世界》一書(shū)中的介紹，其中可能存在疑點(diǎn)或者錯(cuò)誤，如果有錯(cuò)誤的地方，歡迎各位大牛指正！獻(xiàn)上花花。。。(*^__^*) 嘻嘻……

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2215.html

相關(guān)文章

  • 《CSS世界》閱讀筆記（二）——塊級(jí)元素與基本尺寸

    摘要：塊級(jí)元素基本概念塊級(jí)元素是一個(gè)水平流上只能單獨(dú)顯示一個(gè)元素，多個(gè)塊級(jí)元素則換行顯示。其中內(nèi)部尺寸由內(nèi)部元素決定還有一類(lèi)叫作外部尺寸寬度由外部元素決定。所以子元素的高度設(shè)為是無(wú)效的。此時(shí)的就會(huì)有計(jì)算值，即使祖先元素的計(jì)算為也是如此。 塊級(jí)元素基本概念 塊級(jí)元素：是一個(gè)水平流上只能單獨(dú)顯示一個(gè)元素，多個(gè)塊級(jí)元素則換行顯示。 塊級(jí)元素和display 為 block 的元素不是一個(gè)概念。 每...

    lylwyy2016 評(píng)論0 收藏0

  • jQuery操作之效果

    摘要：，用于綁定兩個(gè)或多個(gè)事件處理器函數(shù)，以響應(yīng)被選元素的輪流的事件。用選擇器選中第二個(gè)，給它綁定事件，現(xiàn)在是顯示的，它會(huì)在一秒鐘之內(nèi)慢慢的隱藏，實(shí)現(xiàn)淡出效果。，通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果。效果如下，，關(guān)閉頁(yè)面上所有的動(dòng)畫(huà)。 jQuery操作之效果 效果操作一共分五類(lèi)：1.基本，2.滑動(dòng)，3.淡入淡出，4.自定義，5.設(shè)置showImg(https://segmentfa...

    seal_de 評(píng)論0 收藏0

  • 《css世界》- 詳細(xì)重點(diǎn)筆記與技巧

    摘要：概述在世界這本書(shū)中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書(shū)中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲！??！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問(wèn)題、小圖標(biāo)與文字居中問(wèn)題等; ps: 特別是 line-h...

    MasonEast 評(píng)論0 收藏0

  • 《css世界》- 詳細(xì)重點(diǎn)筆記與技巧

    摘要：概述在世界這本書(shū)中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書(shū)中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲?。?！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問(wèn)題、小圖標(biāo)與文字居中問(wèn)題等; ps: 特別是 line-h...

    趙連江 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<