CSS页面过渡和动画

Question

我正在为朋友在投资组合网站上工作。基础知识如下：

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之间进行转换 没有＆＃34; Front Page＆＃34;闪烁？有没有办法隐藏首页，同时转换到工作或约？
• 也;我如何使#about和#work从中滑动 是的，而不是左（？）

Answer 1

您的过渡时间与过去相同。因此，当您选择一个新项目时，您的初始菜单会在新项目出现之前重新进入。结果是您暂时看到下面的页面。

您可以为CSS过渡添加delay property，以及属性，持续时间和缓动。如果你在菜单的转换过程中有延迟，那么它会在动画输出之前等待出现的菜单。事实上，一旦导航菜单隐藏在新菜单背后，您可能根本不需要为其设置动画，您可以立即将其移回 - 取决于您的转换正在进行的操作。

<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上定义它 - 尽管我已经如果还有其他原因，请将其留在您的代码中。