CSS實現展開動畫

時間  2021-01-29
標籤 javascript css html java git github 小程序 瀏覽器 安全 微信 欄目 CSS 简体版
原文   原文鏈接

CSS實現展開動畫

展開收起效果是比較常見的一種交互方式，一般的作法是控制display屬性值在none和其它值之間切換，雖然說功能能夠實現，可是效果略顯生硬，因此會有這樣的需求——但願元素展開收起能具備平滑的效果。javascript

實現

首先想到的是經過height在0與auto之間切換，可是結果可能並不會是咱們所預期的那樣，緣由是咱們將要展開的元素內容是動態的，即高度值不肯定，所以height使用的值是默認的auto，從0px到auto是沒法計算的，所以沒法造成過渡或動畫效果。
據此咱們可使用max-height，將max-height從0過渡到一個可以大於徹底顯示內部元素的值，展開後的max-height值，只須要設定爲保證比展開內容高度大的值便可，在max-height值比height值大的狀況下，元素仍會默認採用自身的高度值即auto，如此一來一個高度不定的元素展開收起動畫效果就實現了。
請注意這種方式實現仍是有限制的，使用CSS進行過渡動畫的時候依舊是經過計算0到設定的max-height高度值進行計算的，在實際應用中若是max-height值太大，在元素收起的時候將會產生延遲的效果，這是由於在收起時，max-height從設定的特別大的值，到元素自身高度值的變化過程將佔用較多時間，此時畫面表現則會產生延遲的效果。所以建議將max-height值設置爲足夠安全的最小值，這樣在收起時即便有略微延遲，也會由於時間很短，難以被用戶感知，將不會影響體驗。css

<!DOCTYPE html>
<html>
<head>
    <title>展開動畫</title>
    <style type="text/css">
        .page{
            width: 200px;
            padding: 10px 20px;
            border: 1px solid #eee;
        }
        .container {
            overflow: hidden;
        }
        .container > .options{
            transition: all .5s;
            max-height: 0;
        }
        .container > .unfold{
            max-height: 150px;
        }
        .container > .btn{
            color: #4C98F7;
            cursor: pointer;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="container">
            <div class="btn" onclick="operate(this)" unfold="1">展開</div>
            <div class="options">
                <div class="option">選項1</div>
                <div class="option">選項2</div>
                <div class="option">選項3</div>
                <div class="option">選項4</div>
                <div class="option">選項5</div>
                <div class="option">選項6</div>
                <div class="option">選項7</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function operate(btn){
        const optionsNode = document.querySelector(".container > .options");
        const unfold = btn.getAttribute("unfold");
        if(unfold && unfold==="1"){
            btn.innerText = "收縮";
            optionsNode.classList.add("unfold");
        }else{
            btn.innerText = "展開";
            optionsNode.classList.remove("unfold");
        }
        btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
    }
</script>
</html>

使用max-height一定有必定的侷限性，那麼不如咱們在DOM加載完成後就取得元素的實際高度並保存，以後直接利用這個真實高度與0進行動畫過渡便可，由於瀏覽器的渲染順序，在解析JavaScript時會阻塞DOM的渲染，因此在獲取元素實際高度再設置高度爲0的過程當中通常不會出現閃爍的狀況，若是實在擔憂由於獲取高度以後再將高度設置爲0可能會有一個閃爍的過程，那麼咱們能夠取得元素父節點後調用cloneNode(true)方法或者innerHTML方法取得字符串再innerHTML到一個新建立的節點，目的就是將其拷貝，以後將其使用絕對定位等放置到屏幕外即將其設置到屏幕可以顯示的外部區域，注意此時要設置body的overflow: hidden;，以後利用getComputedStyle取得實際高度，而後再將其移出DOM結構，此時有了實際高度就能夠進行動畫過渡了，下面簡單的實現一下在DOM加載時便取得實際高度進行動畫實現。html

<!DOCTYPE html>
<html>
<head>
    <title>展開動畫</title>
    <style type="text/css">
        .page{
            width: 200px;
            padding: 10px 20px;
            border: 1px solid #eee;
        }
        .container {
            overflow: hidden;
        }
        .container > .options{
            transition: all .5s;
        }
        .container > .btn{
            color: #4C98F7;
            cursor: pointer;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="container">
            <div class="btn" onclick="operate(this)" unfold="1">展開</div>
            <div class="options">
                <div class="option">選項1</div>
                <div class="option">選項2</div>
                <div class="option">選項3</div>
                <div class="option">選項4</div>
                <div class="option">選項5</div>
                <div class="option">選項6</div>
                <div class="option">選項7</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    (function init(win, doc){
        const optionsNode = document.querySelector(".container > .options");
        optionsNode.setAttribute("real-height", win.getComputedStyle(optionsNode).height);
        optionsNode.style.height = "0px";
    })(window, document);

    function operate(btn){
        const optionsNode = document.querySelector(".container > .options");
        const unfold = btn.getAttribute("unfold");
        const realHeight = optionsNode.getAttribute("real-height");
        if(unfold && unfold==="1"){
            btn.innerText = "收縮";
            optionsNode.style.height = realHeight;
        }else{
            btn.innerText = "展開";
            optionsNode.style.height = "0px";
        }
        btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
    }
</script>
</html>

還有一種經常使用實現動畫的方式，即首先將外層元素沒有動畫過渡的形式直接展開，再將選項加入動畫緩慢下落，一般利用transform: translateY();去實現這個緩慢降低的動畫，在微信的WEUI小程序組件庫的首頁就是採用這種實現方式。java

<!DOCTYPE html>
<html>
<head>
    <title>展開動畫</title>
    <style type="text/css">
        .page{
            width: 200px;
            padding: 10px 20px;
            border: 1px solid #eee;
        }
        .container, .options-container {
            overflow: hidden;
        }
        .options-container{
            height: 0;
        }
        .container .options{
            transition: all .5s;
            transform: translateY(-100%); 
        }
        .container .unfold{
            transform: translateY(0); 
        }
        .container > .btn{
            color: #4C98F7;
            cursor: pointer;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="container">
            <div class="btn" onclick="operate(this)" unfold="1">展開</div>
            <div class="options-container">
                <div class="options">
                    <div class="option">選項1</div>
                    <div class="option">選項2</div>
                    <div class="option">選項3</div>
                    <div class="option">選項4</div>
                    <div class="option">選項5</div>
                    <div class="option">選項6</div>
                    <div class="option">選項7</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function operate(btn){
        const optionsNode = document.querySelector(".container .options");
        const optionsContainer = document.querySelector(".options-container");
        const unfold = btn.getAttribute("unfold");
        if(unfold && unfold==="1"){
            btn.innerText = "收縮";
            optionsNode.classList.add("unfold");
            optionsContainer.style.height = "auto";
        }else{
            btn.innerText = "展開";
            optionsNode.classList.remove("unfold");
            optionsContainer.style.height = "0px";
        }
        btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
    }
</script>
</html>

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

http://www.111com.net/wy/192615.htm
https://zhuanlan.zhihu.com/p/52582555
https://cloud.tencent.com/developer/article/1499033
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程