手風琴-過渡效果,顯示隱藏列表案例

阿新 • • 發佈：2020-07-15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .menu  
{
            width: 200px;
            height: auto;
            margin: 100px auto;
        }
        .item {
            width: 100%;
            height: auto;
        }
        .item > h3 {
            height: 40px;
            line-height: 40px;
            background-color: #7dffe7;
            color 
: orange;
            border-bottom: 2px solid #ccc;
            padding-left: 10px;
        }
        .item > .itemBox {
            width: 100%;
            height: 0px;
            overflow: hidden;
            /* 新增過渡的效果:過渡效果只能產生從某個值到另一個具體值的過渡 */
            transition-property: height;

            /* 
 一定要設定過渡效果的耗時 */
            transition-duration: 1s;

        }

        /* 為 item 新增hover偽類 */
        .item:hover > .itemBox {
            height: 100px;
        }

        .item > .itemBox > ul {
            list-style: none;
            background-color: #aeffb6;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <h3>市內新聞</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>省內新聞</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>國內新聞</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>國際新聞</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                    <li>深圳豬肉遭哄搶</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

手風琴-過渡效果,顯示隱藏列表案例

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

CSS顯示隱藏元素案例——土豆網視訊顯示隱藏遮蔽罩

技術標籤：css 滑鼠不移動到圖片上不顯示遮蔽罩滑鼠移動到圖片上顯示遮蔽罩和播放標誌

search路徑，列表設定過渡效果

typeNav.vue html部分 <transition name=\"show\"> <div class=\"sort\" v-show=\"isShow\"> <div class=\"all-sort-list2\" @click=\"toSearch\">

原生JS列表自動滾動，帶過渡效果

技術標籤：js基礎效果：兩種方式，1）利用css的margin值來實現滾動，2）利用dom元素身上的scrollTop來實現

vue v-for迴圈列表，點選顯示隱藏

css： .listTitle{width: 7.5rem;height: 1rem;margin: auto;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #eee;}