Question

Chrome mobile使用Google的素材设计获得了这个漂亮的菜单动画：

Chrome的操作菜单：Image

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

Answer 1

仅限CSS：

<强> 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>

如何创建类似菜单动画的Chrome移动设备？

1 个答案: