0

我有一些div如下。

<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 的新手,希望能得到所有帮助。

4

2 回答 2

1

对于 CSS 动画,您可以使用transition:样式,对于一系列转换,将其与transition-delay:

以下是一些开始研究的好地方:

本教程包含您提到的转换:

于 2013-09-24T18:18:53.003 回答
0

我觉得你可以看看

  • Efeckt.css,这是来自 html5-boilerplate 团队的一个很棒的项目。但正如他们所说的“工作正在进行中!还没有准备好迎接黄金时段”
  • Animate.css更适合生产但不那么雄心勃勃
于 2013-09-24T13:13:38.407 回答