成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js輕松實現(xiàn)折疊面板

gghyoo / 3320人閱讀

摘要:移動端導(dǎo)航欄有個很常見的折疊菜單,有插件實現(xiàn),有組件。最近用無插件實現(xiàn)一個這樣的效果。探究歷程直接采用,雖然實現(xiàn)了控制容器的顯示和隱藏,但是效果生硬。

移動端導(dǎo)航欄有個很常見的折疊菜單,bootstrap有collapse插件實現(xiàn),jQuery UI有Accordion組件。最近用js無插件實現(xiàn)一個這樣的效果。 探究歷程

display:none;

直接采用display,雖然實現(xiàn)了控制容器的顯示和隱藏,但是效果生硬。

//jq或者zepeto的hide和show方法就是采用這個屬性
$("#el").hide();
$("#el").show();
/**
show: function() {
      return this.each(function() {
        //清除元素的內(nèi)聯(lián)display="none"的樣式
        this.style.display == "none" && (this.style.display = null)
        //當樣式表里的該元素的display樣式為none時,設(shè)置它的display為默認值
        if (getComputedStyle(this, "").getPropertyValue("display") == "none") this.style.display = defaultDisplay(this.nodeName) //defaultDisplay是獲取元素默認display的方法
      })
    },
hide: function() {
      return this.css("display", "none")
    }
**/

transition: height 600ms;

改變?nèi)萜鞯母叨?,配合overflow: hidden;實現(xiàn)平滑動畫

//思路示例
//css

//html

...
//js //這樣雖然實現(xiàn)了效果,但是需要提前知道容器的高度 //如果設(shè)置height為auto,然而transition并沒有效果

transition: max-height 600ms;

將transition的屬性換成max-height,max-height會限制元素的height小于這個值,所以我們將關(guān)閉狀態(tài)的值設(shè)成0,打開狀態(tài)設(shè)置成足夠大

//思路示例
//css

//html

...
//js //這樣過程中就會有個不盡人意的地方,關(guān)閉的時候總會有點延遲 //原因可能是maxHeight到height這個值得過渡過程耗費了時間

獲取容器真實height

網(wǎng)上搜了一下,拜讀了內(nèi)容loading加載后高度變化CSS3 transition體驗優(yōu)化,看到了這個方法

//思路:取消transition==》設(shè)置height:auto==》
//獲取容器真實height==》設(shè)置height:0==》
//設(shè)置transition==》觸發(fā)瀏覽器重排==》
//設(shè)置容器真實height
function openAndClose(){
        var el = document.getElementById("box");
        if(window.getComputedStyle(el).height == "0px"){
            // mac Safari下,貌似auto也會觸發(fā)transition, 故要none下~
            el.style.transition = "none";
            el.style.height = "auto";
            var targetHeight = window.getComputedStyle(el).height;
            el.style.transition = "height 600ms"
            el.style.height = "0px";
            el.offsetWidth;//觸發(fā)瀏覽器重排
            el.style.height = targetHeight;
        }else{
            el.style.height="0px";
        }
    }
其他

getComputedStyle() 方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對象|MDN

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/112669.html

相關(guān)文章

  • js輕松實現(xiàn)折疊面板

    摘要:移動端導(dǎo)航欄有個很常見的折疊菜單,有插件實現(xiàn),有組件。最近用無插件實現(xiàn)一個這樣的效果。探究歷程直接采用,雖然實現(xiàn)了控制容器的顯示和隱藏,但是效果生硬。 移動端導(dǎo)航欄有個很常見的折疊菜單,bootstrap有collapse插件實現(xiàn),jQuery UI有Accordion組件。最近用js無插件實現(xiàn)一個這樣的效果。 探究歷程 display:none; 直接采用display,雖然實現(xiàn)...

    suxier 評論0 收藏0
  • 前端開發(fā)文檔

    摘要:最近在整理全棧開發(fā)方面的技術(shù)細節(jié),寫成文檔方便工作中查找,在這里分享這個站點。 最近在整理全棧開發(fā)方面的技術(shù)細節(jié),寫成文檔方便工作中查找,在這里分享這個站點。地址:前端開發(fā)文檔 全棧開發(fā) HTML5/CSS3 HTML元素 語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南 彈性圖...

    JerryC 評論0 收藏0
  • 前端開發(fā)文檔

    摘要:最近在整理全棧開發(fā)方面的技術(shù)細節(jié),寫成文檔方便工作中查找,在這里分享這個站點。 最近在整理全棧開發(fā)方面的技術(shù)細節(jié),寫成文檔方便工作中查找,在這里分享這個站點。地址:前端開發(fā)文檔 全棧開發(fā) HTML5/CSS3 HTML元素 語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南 彈性圖...

    binta 評論0 收藏0
  • 前端開發(fā)文檔

    摘要:最近在整理全棧開發(fā)方面的技術(shù)細節(jié),寫成文檔方便工作中查找,在這里分享這個站點。 最近在整理全棧開發(fā)方面的技術(shù)細節(jié),寫成文檔方便工作中查找,在這里分享這個站點。地址:前端開發(fā)文檔 全棧開發(fā) HTML5/CSS3 HTML元素 語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南 彈性圖...

    Yi_Zhi_Yu 評論0 收藏0
  • With TypeScript 2.8+ :更好的 React 組件開發(fā)模式

    摘要:近兩年來一直在關(guān)注開發(fā),最近也開始全面應(yīng)用。首先,我們從無狀態(tài)組件開始。渲染回調(diào)模式有一種重用組件邏輯的設(shè)計方式是把組件的寫成渲染回調(diào)函數(shù)或者暴露一個函數(shù)屬性出來。最后,我們將這個回調(diào)函數(shù)的參數(shù)聲明為一個獨立的類型。 近兩年來一直在關(guān)注 React 開發(fā),最近也開始全面應(yīng)用 TypeScript 。國內(nèi)有很多講解 React 和 TypeScript 的教程,但如何將 TypeScri...

    simon_chen 評論0 收藏0

發(fā)表評論

0條評論

gghyoo

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<