2013-09-24 4 views
0

У меня есть некоторые divs следующим образом.CSS3 Переходы вместо jQuery

<body> 
    <div class="main"> 
     <div class="page1 active"> 
      <p>Page1</p> 
      <button id="btn-about">Page2</button> 
     </div> 
     <div class="page2"> 
      <p>Page2</p> 
     </div> 
    </div> 
</body> 

Страницы скрыты по умолчанию, если у них нет активного класса. Чтобы отобразить новую страницу, я удалить все активные классы в DIV, который имеет основной класс, а затем добавить активный класс к странице, я хочу, например, для страницы 2.

С чем-то вроде этого

$("#btn-about").click(

    function(e) { 
     e.preventDefault(); 
     $(".main div").removeClass("active"); 
     $(".main .page-2").addClass("active"); 

    } 

); 

И тогда он становится чем-то вроде этого:

<div class="page2 active"> 
    <p>Page2</p> 
</div> 

это прекрасно работает, но теперь я хочу, с помощью CSS3, чтобы скрыть или показать страницы с определенными эффектами. Раздвижные, Раздвижные, Раздвижные левые, Раздвижные вправо или Fades.

Я новичок в CSS3 и буду благодарен за помощь.

+0

Вот несколько примеров вдохновения: http://www.justinaguilar.com/animations/ – pawel

ответ

1

Для CSS анимаций вы можете использовать transition: стиль для последовательности переходов объединить его с transition-delay:

Вот некоторые хорошие места, чтобы начать исследования:

И этот учебник имеет переходы вы упомянули:

0

Я думаю, вы можете посмотреть на

  • Effeckt.css, который является проектом от команды html5-шаблонной. Но, как говорится «в незавершенном! Не совсем готов к прайм-тайм»
  • Animate.css который более готовый к производству, но менее амбициозны
Смежные вопросы