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

資訊專欄INFORMATION COLUMN

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

suxier / 2723人閱讀

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

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

display：none；

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

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

transition: height 600ms;

改變?nèi)萜鞯母叨?，配合overflow: hidden;實(shí)現(xiàn)平滑動(dòng)畫

//思路示例
//css

//html


...

//js

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

transition: max-height 600ms;

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

//思路示例
//css

//html


...

//js

//這樣過(guò)程中就會(huì)有個(gè)不盡人意的地方，關(guān)閉的時(shí)候總會(huì)有點(diǎn)延遲
//原因可能是maxHeight到height這個(gè)值得過(guò)渡過(guò)程耗費(fèi)了時(shí)間

獲取容器真實(shí)height

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

//思路：取消transition==》設(shè)置height：auto==》
//獲取容器真實(shí)height==》設(shè)置height：0==》
//設(shè)置transition==》觸發(fā)瀏覽器重排==》
//設(shè)置容器真實(shí)height
function openAndClose(){
        var el = document.getElementById("box");
        if(window.getComputedStyle(el).height == "0px"){
            // mac Safari下，貌似auto也會(huì)觸發(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屬性對(duì)象|MDN

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89499.html

相關(guān)文章

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

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

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

  • 前端開(kāi)發(fā)文檔

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

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

  • 前端開(kāi)發(fā)文檔

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

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

  • 前端開(kāi)發(fā)文檔

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

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

  • With TypeScript 2.8+ ：更好的 React 組件開(kāi)發(fā)模式

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

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

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

0條評(píng)論

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