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 沒有「Fro nt頁面「閃爍？有沒有辦法在轉換到任何工作或關於過程中隱藏首頁？
• 另外;我怎樣才能使#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上定義它 - 儘管我已將它留在您的代碼中，以防有其他原因。