Question

我想展开以我的页面为中心的无序列表。我试图将外部容器居中，让内部内容随着转换和一个简短的jquery代码而增长。但缓和效果不能可靠 - 为什么？

    <style>

    html,
    body {
        height:100%;
        min-height: 100%;
        position: relative;
    }

    button {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 2;
    }

    .wrapper {
        width:0;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        max-height: 0;
        margin: 0 auto;

        -webkit-transition: width 1s ease-in, max-height 2s ease 1.5s;
           -moz-transition: width 1s ease-in, max-height 2s ease 1.5s;
            -ms-transition: width 1s ease-in, max-height 2s ease 1.5s;
             -o-transition: width 1s ease-in, max-height 2s ease 1.5s;
                transition: width 1s ease-in, max-height 2s ease 1.5s;
    }

    ul {
        position: relative;
        margin: 20px 0;
        padding: 0;
        width: 100%;
        -webkit-transform: scale(1);
                transform: scale(1);
        list-style-type: none;
        -webkit-column-count: 3;
           -moz-column-count: 3;
                column-count: 3;
    }

    ul > li {
        opacity: 0;
    }

    .open {
        max-height: 500px;
        width:100%;
    }

    .center {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    </style>
</head>
<body>

    <button class="btn btn-primary" type="button">
        Expand
    </button>

    <div class="center">
        <div class="container">
            <div class="wrapper">
                <ul>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script>

    $( document ).ready(function() {
        $('button').click(function() {
            $('.wrapper').addClass('open');
            setTimeout(function () {
                $('ul > li').each(function(index) {
                  $(this).delay(50*index).animate({ opacity: 1 });
                });
            }, 2500);
        });
    });

    </script>

过渡轻松无效

0 个答案: