Переходы и анимация страниц 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 (или) № без наличия «Fro nt Page "мигает? Есть ли способ скрыть титульную страницу при переходе на любую работу или около?
• Также; Как мне сделать так, чтобы #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 версии элементов. Когда элемент становится мишенью, переход происходит сразу, но когда он теряет статус цели и возвращается к регулярному элементу, происходит переход на переход, поэтому он ожидает, что следующая цель будет на месте перед исчезновением.

Я также добавил в swapping z-index, так что цель всегда выше обычных элементов. Если вы просто определяете z-индекс в основном определении, он будет также каскадом к: target.

Наконец, я добавил яркие цвета фона элементам в их разных состояниях, чтобы вы могли четко видеть, что происходит.

Последнее примечание: Если вы указали #menu ширину, я бы не ожидал, что вы также должны определить его на #menu:target - хотя я оставил его в вашем коде, если есть какая-то другая причина.