javascript - 如何创建类似 Chrome 手机的菜单动画？

Question

Chrome 移动版使用 Google 的 Material 设计获得了这个漂亮的菜单动画:

运行中的 Chrome 菜单:Image

最酷的是菜单项按顺序打开的方式。使用 CSS、jQuery 或两者，最正确的方法是什么？

Answer 1

仅限 CSS:

http://jsfiddle.net/coma/obeqs75k/

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400);

html {
    font-family: Roboto;
}

menu {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

menu div.links a {
    display: block;
    padding: 18px;
}

menu div.icons > * {
    display: block;
    float: right;
    width: 52px;
    height: 52px;
    background: red;
}

menu div.icons:after {
    content: "";
    display: block;
    clear: both;
}

menu > div {
    overflow: hidden;
    width: 52px;
    height: 52px;
    transition: all 350ms;
}

menu > div:after {
    content: "";
    display: block;
    position: absolute;
    top: 52px;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 10%,#fff 100%);
    opacity: 1;
    transition: top 500ms;
    transition-delay: 250ms;
}

#toggle {
    display: none;
}

#toggle:checked + div {
    width: 286px;
    height: 520px;
}

#toggle:checked + div:after {
    top: 100%;
}

HTML

<menu>
    <input type="checkbox" id="toggle"/>
    <div>
        <div class="icons">
            <label for="toggle"></label>
        </div>
        <div class="links">
            <a>New tab</a>
            <a>New incognito tab</a>
            <a>Bookmarks</a>
            <a>Recent tabs</a>
            <a>History</a>
            <a>Print...</a>
            <a>Request Desktop site</a>
            <a>Settings</a>
            <a>Help & Feedback</a>
        </div>
    </div>
</menu>