CSS3 переходы вместо jQuery

Question

CSS3 переходы вместо jQuery

0

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

<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, который имеет класс main, а затем добавляет активный класс на страницу, которую я хочу, например, на стр. 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 и буду признателен за всю помощь.

ZhaoYiLi 24 сен. 2013, в 15:06

Источник

Теги:

javascript

jquery

css

css3

2 ответа

0

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

Effeckt.css, который является отличным проектом из команды html5. Но, как говорится, "Работа в процессе! Не совсем готова к прайм-тайм",
Animate.css, который является более готовым к производству, но менее амбициозным

LFI 24 сен. 2013, в 10:43

Ещё вопросы

ZhaoYiLi · Accepted Answer · 2013-09-24T16-48-00.000Z

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

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

И этот урок содержит перечисленные вами переходы:

http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/
Демонстрация: Скольжение сверху (http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#home)
Демо: Fading in/out (http://tympanus.net/Tutorials/CSS3PageTransitions/index2.html#portfolio)
Демонстрация: Скольжение со стороны (http://tympanus.net/Tutorials/CSS3PageTransitions/index3.html#portfolio)