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

suxier 發(fā)布于2019-08-21 17:26 / 2708人閱讀

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

移動端導航欄有個很常見的折疊菜單，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時，設置它的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)萜鞯母叨龋浜蟧verflow: hidden;實現(xiàn)平滑動畫

//思路示例
//css

//html

...
//js

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

transition: max-height 600ms;

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

//思路示例
//css

//html

...
//js

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

獲取容器真實height

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

//思路：取消transition==》設置height：auto==》
//獲取容器真實height==》設置height：0==》
//設置transition==》觸發(fā)瀏覽器重排==》
//設置容器真實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() 方法獲取的是最終應用在元素上的所有CSS屬性對象|MDN

云服務器 GPU云服務器 JS輕松實現(xiàn)CSS設置可折疊面板 js 折疊 js 折疊頁

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89499.html

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

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

gghyoo 2019-08-29 13:44 評論0 收藏0
前端開發(fā)文檔

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

JerryC 2019-08-22 17:04 評論0 收藏0
前端開發(fā)文檔

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

binta 2019-08-29 15:21 評論0 收藏0
前端開發(fā)文檔

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

Yi_Zhi_Yu 2019-08-02 10:23 評論0 收藏0
With TypeScript 2.8+ ：更好的 React 組件開發(fā)模式

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

simon_chen 2019-08-22 17:58 評論0 收藏0