CSS3 Transitions代替jQuery

Question

我有一些股利如下。

<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隱藏或顯示具有某些效果的頁面。 向上滑動，向下滑動，向左滑動，向右滑動或淡入淡出。

我是關於CSS3的新手，希望能獲得所有幫助。

Answer 1

對於CSS動畫，您可以使用transition:樣式，對於一系列過渡，請將其與transition-delay:結合使用transition-delay:

這里是一些開始研究的好地方：

本教程具有您提到的過渡：

http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/
演示：從頂部滑動（ http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#home ）
演示：淡入/淡出（ http://tympanus.net/Tutorials/CSS3PageTransitions/index2.html#portfolio ）
演示：從側面滑入（ http://tympanus.net/Tutorials/CSS3PageTransitions/index3.html#portfolio ）

Answer 2

我想你可以看看

Effeckt.css ，這是html5-boilerplate團隊的一項出色計划。 但是正如他們所說的“正在進行中！還沒准備好迎接黃金時段”
Animate.css可以更快速地進行生產，但是雄心勃勃

CSS3 Transitions代替jQuery

問題描述

2 個解決方案

解決方案1
1 已采納 2013-09-24 18:18:53

解決方案2
0 2013-09-24 13:13:38

CSS3 Transitions代替jQuery

問題描述

2 個解決方案

解決方案1 1 已采納 2013-09-24 18:18:53

解決方案2 0 2013-09-24 13:13:38

解決方案1
1 已采納 2013-09-24 18:18:53

解決方案2
0 2013-09-24 13:13:38