CODEWITHSUNDEEP
javascriptjquerycss
user1743227
user1743227

Reputation:

CSS3 Transitions instead of jQuery

I have some divs as follows. 

<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>

The pages are hidden by default unless they have the active class. To display a new page, I remove all active classes within the div which has class main and then add the active class to the page I want, for e.g page 2.

With something like this

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

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

    }

);

And then it becomes something like this: 

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

It works fine but now I want, using CSS3, to hide or show the pages with certain effects. Sliding Up, Sliding Down, Sliding Left, Sliding Right or Fades.

I am a newbie regarding CSS3 and would appreciate all the help.

Upvotes: 0

Views: 463

Answers (2)

ZhaoYiLi
ZhaoYiLi

Reputation: 173

For CSS animations you can use the transition: style, for a sequence of transitions combine it with transition-delay:

Here are some good places to start researching:

And this tutorial has the transitions you mentioned:

Upvotes: 1

LFI
LFI

Reputation: 654

I think you can look at

  • Effeckt.css, which is a great project from the html5-boilerplate team. But as they say "Work in Progress! Not quite ready for prime-time"
  • Animate.css which is more production ready but less ambitious

Upvotes: 0

Related Questions