У меня есть некоторые 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 и буду благодарен за помощь.
Вот несколько примеров вдохновения: http://www.justinaguilar.com/animations/ – pawel