html - CSS 页面转换和动画

Question

我正在为一个 friend 开发一个作品集网站。基本情况如下所示:

http://jsfiddle.net/5h74qskg/2/

<div id="content">
    <div id="main">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Front Page</p>
        </div>
    </div>
    <div id="work">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Work</p>
        </div>
        </div>
    </div>
    <div id="about">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>About</p>
        </div>
        </div>
    </div>
    <div id="menu">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#home"><div id="menu-back">MENU
            </div></a>
        </div>
        <div id="menu-item">
            <p><a class="link" href="#work">work</a></p>
            <p><a class="link" href="#about">about</a></p>
        </div>
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    background: #f2f2f2;
    color: #000;
}

#content {
    clear: both;
    margin: 120px;
}

#menu-nav {
    float: left;
    width: 50%;
}

#menu {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0;
    left: 0;
    z-index:2;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#menu:target {
    width: 100%;
    height: 100%;
    color: #fff;
    overflow: hidden;
    margin-left: 0;
    background: #ccc;
}

#work, #about {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0px;
    left: 0px;
    z-index:2;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#work:target, #about:target {
    width: 100%;
    height: 100%;
    color: #000;
    overflow: hidden;
    margin-left: 0;
    background: #f2f2f2;
}

#main-item, #menu-item {
    float: left;
    width: 50%;

}

我的问题是:

• 如何在#menu 和#work(或)#about 之间进行转换没有“头版”闪过？有没有一种方法可以在转换到工作或事件时隐藏首页？
• 还有；我该怎么做才能让#about 和#work 从右，而不是左(？)

Answer 1

您有一个进出相同的过渡。因此，当您选择一个新元素时，您的初始菜单会在新元素出现之前移回。结果是您会立即看到下面的页面。

您可以添加 delay property到 CSS 过渡，以及属性、持续时间和缓动。如果您在菜单返回时有延迟，它将等待出现的菜单在其动画出来之前就位。事实上，一旦该导航菜单隐藏在新菜单后面，您可能根本不需要对其进行动画处理，您可以立即将其移回原位 - 取决于您的过渡效果。

<style type="text/css">
body {
    margin: 0;
    background: #f2f2f2;
    color: #000;
}
#content {
    clear: both;
    margin: 120px;
}
#menu-nav {
    float: left;
    width: 50%;
}
#menu {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: margin-left .4s ease-in-out .4s;
    -moz-transition: margin-left .4s ease-in-out .4s;
    -o-transition: margin-left .4s ease-in-out .4s;
    -ms-transition: margin-left .4s ease-in-out .4s;
    transition: margin-left .4s ease-in-out .4s;
    background: red;
}
#menu:target {
    width: 100%;
    height: 100%;
    color: #fff;
    overflow: hidden;
    margin-left: 0;
    z-index: 2;
    -webkit-transition: margin-left .4s ease-in-out;
    -moz-transition: margin-left .4s ease-in-out;
    -o-transition: margin-left .4s ease-in-out;
    -ms-transition: margin-left .4s ease-in-out;
    transition: margin-left .4s ease-in-out;
    background: orange;
}
#work, #about {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0px;
    left: 0px;
    z-index: 1;
    -webkit-transition: margin-left .4s ease-in-out .4s;
    -moz-transition: margin-left .4s ease-in-out .4s;
    -o-transition: margin-left .4s ease-in-out .4s;
    -ms-transition: margin-left .4s ease-in-out .4s;
    transition: margin-left .4s ease-in-out .4s;
    background: green;
}
#work:target, #about:target {
    width: 100%;
    height: 100%;
    color: #000;
    overflow: hidden;
    margin-left: 0;
    z-index: 2;
    -webkit-transition: margin-left .4s ease-in-out;
    -moz-transition: margin-left .4s ease-in-out;
    -o-transition: margin-left .4s ease-in-out;
    -ms-transition: margin-left .4s ease-in-out;
    transition: margin-left .4s ease-in-out;
    background: lightblue;
}
#main-item, #menu-item {
    float: left;
    width: 50%;
}
</style>
<div id="content">
    <div id="main">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Front Page</p>
        </div>
    </div>
    <div id="work">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Work</p>
        </div>
        </div>
    </div>
    <div id="about">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>About</p>
        </div>
        </div>
    </div>
    <div id="menu">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#home"><div id="menu-back">MENU
            </div></a>
        </div>
        <div id="menu-item">
            <p><a class="link" href="#work">work</a></p>
            <p><a class="link" href="#about">about</a></p>
        </div>
        </div>
    </div>
</div>

您的代码略有修改。您在元素的原始版本和 :target 版本上都有重复的转换。当元素成为目标时，转换会立即发生，但当它失去目标状态并返回到常规元素时，转换会有延迟 - 因此它会等待下一个目标到位，然后才会消失。

我还添加了一些 z-index 交换，以便目标始终位于常规元素之上。如果您只是在主定义上定义 z-index，它也会级联到 :target。

最后我给不同状态的元素添加了一些明亮的背景色，就是为了让你看的更清楚。

最后一点:如果你给了 #menu 一个宽度，我不希望你还必须在 #menu:target 上定义它 -尽管我已将它留在您的代码中以防有其他原因。